打扰一下,我会说西班牙语,
我的问题是,我如何才能单击一个信息框然后关闭其他信息框,如果选择其他信息框,则会打开该信息框并关闭其他信息框。
这意味着当您单击一个时,它是唯一打开的一个
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
function initialize() {
var secheltLoc = new google.maps.LatLng(49.47216, -123.76307),
markers,
myMapOptions = {
zoom: 13,
center: secheltLoc,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
function initMarkers(map, markerData) {
var newMarkers = [],
marker;
for(var i=0; i<markerData.length; i++) {
marker = new google.maps.Marker({
map: map,
draggable: true,
position: markerData[i].latLng,
visible: true
}),
boxText = document.createElement("div"),
infoboxOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-60, -180),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "0",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
newMarkers.push(marker);
boxText.style.cssText = "";
boxText.innerHTML = "<div class='mapoverlay'><h5><a href=''>" + markerData[i].address + "</a></h5><p>" + markerData[i].state + "<br /><a href=''>more info</a> <span class='orange'>|</span> <a href=''>get directions</a></p></div>";
newMarkers[i].infobox = new InfoBox(infoboxOptions);
newMarkers[i].infobox.open(map, marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
newMarkers[i].infobox.open(map, this);
map.panTo(markerData[i].latLng);
}
})(marker, i));
}
return newMarkers;
}
markers = initMarkers(map, [
{ latLng: new google.maps.LatLng(42.59538, -114.45641), address: "TWIN FALLS", state: "1921 Blue Lakes Blvd. North <br />208-734-4833" },
{ latLng: new google.maps.LatLng(49.47420, -123.75703), address: "TWIN FALLS", state: "1921 Blue Lakes Blvd. North <br />208-734-4833" },
{ latLng: new google.maps.LatLng(49.47530, -123.78040), address: "TWIN FALLS", state: "1921 Blue Lakes Blvd. North <br />208-734-4833" }
]);
}
</script>
<div id="map_canvas" style="width: 670px;height: 465px;"></div>
最佳答案
创建标记后,添加以下内容
// add a click listener to the marker
google.maps.event.addListener(marker, 'click', function() {
// reference clicked marker
var curMarker = this;
// loop through all markers
$.each(markers, function(index, marker) {
// if marker is not the clicked marker, close the marker
if(marker !== curMarker) {
marker.infobox.close();
}
});
});
我在这里创建了一个小提琴示例http://jsfiddle.net/pimlinders/rjmg8/4/
关于jquery - 关闭所有其他窗口并保留当前的信息框Google map ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12804768/