Question

我有多个标记从JSON文件加载到google maps v3 api。但是，它只将最后一个JSON条目加载到最后一个标记的地图infoWindow中。单击时，其他标记不显示任何信息窗口。

我找到了以下相关的帖子，但似乎仍无法使其发挥作用。

..3979486/infowindow-help-on-google-maps-api-3

..2357323/trying-to-bind-multiple-infowindows-to-multiple-markers-on-a-google-map-and-faili

我猜它与addListener的位置有关？

这是我得到的：

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="markerclusterer.js"></script>
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>


<script type="text/javascript">
function initialize() {
  var myLatlng = new google.maps.LatLng(39.632906,-106.524591);
  var myOptions = {
     zoom: 8,
     center: myLatlng,
     mapTypeControl: true,
     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
     navigationControl: true,
     navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     };

  var map = new google.maps.Map(document.getElementById("mapdiv"), myOptions);

    var url = "eventdata.json";
      $.getJSON(url,
        function(data){ 
              $.each(data.markers, function(i,markers){

                  var mylati = data.markers[i].lati;
                  var mylong = data.markers[i].long;
                  var mytitle = data.markers[i].title;
                  var myaddress = data.markers[i].address;
                  var myhtml = data.markers[i].html;

    var mycontent = "<div class='infowin'><h3>" + mytitle + "</h3>" + "<h4>"
    + myaddress + "</h4>" + myhtml + "</div>";

    var myLatlng = new google.maps.LatLng(parseFloat(mylati),parseFloat(mylong));



                <!--Load Event Markers-->
                    var markers = [];
                    for (var i = 0, dataMarkers; dataMarkers = data.markers[i]; i++) {
                      var latLng = new google.maps.LatLng(dataMarkers.lat, dataMarkers.lng);
                      var theTitle = dataMarkers.title;
                      var marker = new google.maps.Marker({
                        position: latLng,
                        clickable: true,
                        title: theTitle,
                      });
                      markers.push(marker);
                    }

                        var markerClusterer = new MarkerClusterer(map, markers, {
                          maxZoom: 15,
                          gridSize: 30,
                        });

                    var infowindow = new google.maps.InfoWindow({
                        content: mycontent
                    });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });




       });
    });

    }

</script>

非常感谢任何帮助

Answer 1

请查看this并尝试了解闭包

Answer 2

通读闭包并想出来......

        var map = new google.maps.Map(document.getElementById("map_canvas"), options);


                var markers = [];
                for (var i = 0, dataMarkers; dataMarkers = data.markers[i]; i++) {
                  var latLng = new google.maps.LatLng(dataMarkers.lat, dataMarkers.lng);
                  var marker = new google.maps.Marker({
                    position: latLng,
                    title: dataMarkers.title,
                    date: dataMarkers.date,
                    time: dataMarkers.time,
                    desc: dataMarkers.desc,
                    img: dataMarkers.img,
                    add: dataMarkers.address,
                    cat: dataMarkers.cat,
                    map: map
                  });


                var infowindow = new google.maps.InfoWindow({
                        content: " "
                      });
                      google.maps.event.addListener(marker, 'click', function() {
                        infowindow.setContent('<div id="mapCont"><img class="mapImg" src="'+this.img+'"/>' +
                                              '<div class="mapTitle">'+this.title+'</div>' + 
                                              '<div class="mapHead">Date: <div class="mapInfo">'+this.date+'</div>' +
                                              '<div class="mapHead">Time: <div class="mapInfo">'+this.time+'</div>' +
                                              '<p>'+this.desc+'</p></div>');
                        infowindow.open(map, this);
                      });

                  markers.push(marker);
                }


            var markerClusterer = new MarkerClusterer(map, markers, {
              maxZoom: 15,
              gridSize: 50
            });

}

尝试在多个标记上显示JSON的InfoWindow数据

2 个答案: