谷歌地图上的多个infowindow

我想在我的谷歌地图上实现多个infowindow。我用下面的代码： -谷歌地图上的多个infowindow

<!DOCTYPE html> 
<html> 
<head> 
<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"), 
      //these are the options for all infoboxes 
      infoboxOptions = { 
       content: boxText, 
       disableAutoPan: false, 
       maxWidth: 0, 
       pixelOffset: new google.maps.Size(-140, 0), 
       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: "12px 4px 2px 2px", 
       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); 
      //define the text and style for all infoboxes 
      boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background:#333; color:#FFF; font-family:Arial; font-size:12px; padding: 5px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;"; 
      boxText.innerHTML = markerData[i].address + "<br>" + markerData[i].state; 
      //Define the infobox 
      newMarkers[i].infobox = new InfoBox(infoboxOptions); 
      //Open box when page is loaded 
      newMarkers[i].infobox.open(map, marker); 
      //Add event listen, so infobox for marker is opened when user clicks on it. Notice the return inside the anonymous function - this creates 
      //a closure, thereby saving the state of the loop variable i for the new marker. If we did not return the value from the inner function, 
      //the variable i in the anonymous function would always refer to the last i used, i.e., the last infobox. This pattern (or something that 
      //serves the same purpose) is often needed when setting function callbacks inside a for-loop. 
      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; 
    } 

    //here the call to initMarkers() is made with the necessary data for each marker. All markers are then returned as an array into the markers variable 
    markers = initMarkers(map, [ 
     { latLng: new google.maps.LatLng(49.47216, -123.76307), address: "Address 1", state: "State 1" }, 
     { latLng: new google.maps.LatLng(49.47420, -123.75703), address: "Address 2", state: "State 2" }, 
     { latLng: new google.maps.LatLng(49.47530, -123.78040), address: "Address 3", state: "State 3" } 
    ]); 
} 
</script> 
<title>Creating and Using an InfoBox</title> 
</head> 
<body onload="initialize()" style="padding:1em"> 
<div id="map_canvas" style="width: 100%;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; height: 300px;border:1px solid #666;margin-bottom:1em;box-shadow: 0px 0px 10px #333;"></div> 
<p> This example shows the use of an InfoBox as a replacement for an InfoWindow. 
<script type="text/javascript"> 
$(function() { 
    if($.browser.msie) { 
     $("<div/>", {html:"<br>Download Firefox <a href='http://www.mozilla.org/de/firefox/new/'>here</a>.", target:"_blank"}).appendTo("body"); 
    } 
}); 
</script> 
</body> 
</html>

它可以正常工作，但现在我想结束在一个标记的，可打开信息窗口的previsouly。我尝试了很多但没有任何反应。请帮助我。在此先感谢

来源

2014-01-09 Rakesh Shetty

我曾遇到类似的问题&以某种方式解决它。看看下面的Link。

来源

2014-01-09 05:48:48

感谢您的回复，但我使用Infobox在infowindow上显示内容。 –

哦！是的，对不起，我没有注意到。希望你会很快找到解决方案.. –

感谢哥们它帮助我，我改变了一些代码，它的工作原理。 –

谷歌地图上的多个infowindow

回答

相关问题