谷歌地图 API 3 上的 Infowindow 帮助

Question

与该网站上的其他人遇到的类似问题，它仅显示所有标记中最后一个标记的信息窗口信息。似乎无法用给出的任何解决方案解决这个问题。另外，我的最后一个标记根本不显示信息窗口。

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="data2.json"></script>
<script type="text/javascript" src="js/markerclusterer.js"></script>

<script type="text/javascript">
  google.load('maps', '3', {
    other_params: 'sensor=false'
  });
  google.setOnLoadCallback(initialize);

  function initialize() {

var center = new google.maps.LatLng(55.4419, -4.1419);

var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 5,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });


var markers = [];
for (var i = 0, dataPhoto; dataPhoto = data.markers[i]; i++) {
      var latLng = new google.maps.LatLng(dataPhoto.latitude,dataPhoto.longitude);
      var theTitle = dataPhoto.address;
      var contentString = '<div align="left"><img src="logo.gif" alt="" width="242" height="71" /><br /><br /><p style="color:#000000;">' + data.markers[i].address + '<br />' + dataPhoto.telephone + '</p></div>';



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



    var thisIcon = 'markers/image.png';


                for (var i = 0, marker; marker = markers[i]; i++) {google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,this);});
      } 


      var marker = new google.maps.Marker({
        position: latLng,
        clickable: true,
        title: theTitle,
        icon: thisIcon,
      });

      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);


  }


</script>

非常感谢任何帮助！

Answer 1

我还没有测试过这个，但它应该可以工作 - 另外请看看：http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures

<script src="http://www.google.com/jsapi">
</script>
<script type="text/javascript" src="data2.json">
</script>
<script type="text/javascript" src="js/markerclusterer.js">
</script>
<script type="text/javascript">
    google.load('maps', '3', {
        other_params: 'sensor=false'
    });
    google.setOnLoadCallback(initialize);

    function initialize(){

        var center = new google.maps.LatLng(55.4419, -4.1419);

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 5,
            center: center,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });


        var markers = [];
        for (var i = 0, dataPhoto; dataPhoto = data.markers[i]; i++) {
            var latLng = new google.maps.LatLng(dataPhoto.latitude, dataPhoto.longitude);
            var theTitle = dataPhoto.address;
            var contentString = '<div align="left"><img src="logo.gif" alt="" width="242" height="71" /><br /><br /><p style="color:#000000;">' + data.markers[i].address + '<br />' + dataPhoto.telephone + '</p></div>';
            var thisIcon = 'markers/image.png';
            var marker = new google.maps.Marker({
                position: latLng,
                clickable: true,
                title: theTitle,
                icon: thisIcon,
            });

            attachIWindow(contentString, marker);


            markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers);


    }

    function attachIWindow(content, marker){


        var infowindow = new google.maps.InfoWindow({
            content: content,

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

Answer 2

我们可以利用闭包来解决这个问题

使用下面的代码片段将信息窗口添加到标记

function AddInfoWidnow(marker,message)
{
     var infowindow = new google.maps.InfoWindow({ content: message });

     google.maps.event.addListener(marker, 'click', function() {

     infowindow.open(marker.get('map'), marker);

    }); 

}

要查看工作示例，请参阅此处

Answer 3

如果我做对了，那么请看一下闭包并尝试正确理解它们。然后 javascript 魔法就会发生！