Question

我无法让我的标记显示不同的信息窗口。标记始终显示最后一个“contentString”的内容。

我已经阅读了其他一些帖子，但似乎都没有帮助。

这是代码：

    function setMarkers(branches, map) {
        var bounds = new google.maps.LatLngBounds();
        var contentString = null;
        var infowindow = null;
        infowindow = new google.maps.InfoWindow();
        for (var i = 0; i < branches.length; i++) {
            var marker = null;
            branch = branches[i];
            var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]);
            contentString = '<p>' + branch[3] + '</p>';

            var marker = new google.maps.Marker({
                position: myLatlngMarker,
                map: map,
                title: branch[2]
            });

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

            bounds.extend(myLatlngMarker);
        }

        map.fitBounds(bounds);
    }

谁能看到我做错了什么？

由于

Answer 1

右，

我找到了解决方案。我在标记'info'中添加了一个额外的属性，然后从'addlistener'事件'infowindow.setContent（this.info）'中引用它。

以下是更新后的代码：

function setMarkers(branches, map) {
    var marker = null;
    var infowindow = new google.maps.InfoWindow();
    var bounds = new google.maps.LatLngBounds();

    for (var i = 0; i < branches.length; i++) {
        branch = branches[i];

        var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]);

        var marker = new google.maps.Marker({
            position: myLatlngMarker,
            map: map,
            title: branch[2],
            info: branch[3],
            icon: '<%=Icon%>'
        });

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

        bounds.extend(myLatlngMarker);
    }

    map.fitBounds(bounds);
}

Answer 2

它始终显示最后一个contentString的原因是因为这是click事件触发时设置的内容。它会在for循环的每次迭代中被覆盖。

您应该使用闭包分配事件处理程序并将contextString作为参数传递给函数，返回真正的处理程序。

google.maps.event.addListener(marker, 'click', function(content) {
    return function(){
        infowindow.setContent(content);//set the content
        infowindow.open(map,this);
    }
}(contentString));

Answer 3

您是否尝试在for循环中声明infowindow和contentString，而不是在循环外部声明？

function setMarkers(branches, map) {
        var bounds = new google.maps.LatLngBounds();

        for (var i = 0; i < branches.length; i++) {
            var infowindow = new google.maps.InfoWindow();
            var contentString = "";
            var marker = null;
            branch = branches[i];
            var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]);
            contentString = '<p>' + branch[3] + '</p>';

            var marker = new google.maps.Marker({
                position: myLatlngMarker,
                map: map,
                title: branch[2]
            });

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

            bounds.extend(myLatlngMarker);
        }

        map.fitBounds(bounds);
    }

Answer 4

我有同样的问题。尽管使用了这段代码，我仍然能够看到不同的标题：

  setMarkers(map, airports);
 }

 function setMarkers(map, locations) 
   {
     //you only need 1 infoWindow
     var infowindow = new google.maps.InfoWindow({
       content: "holding" //content will be set later
     });

     for (var i = 0; i < locations.length; i++) 
     {
       var airport = locations[i];
       var myLatLng = new google.maps.LatLng(airport[1], airport[2]);
       var marker = new google.maps.Marker({
             position: myLatLng,
             map: map,
            title: airport[0],
            zIndex: airport[3],
             html: airport[4],
      });




       google.maps.event.addListener(marker, 'click', function() {
               infowindow.setContent(this.html);//set the content
               infowindow.open(map,this);
       });
     }
   }

Answer 5

一种将严肃的动态信息放入infoWindow的方法（假设您有php或类似的东西）是将infoWindow的内容设置为带有src的iframe，该src从相关标记的位置或ID获取信息。所以在初始化函数中或任何地方。

var pos_info = new google.maps.InfoWindow({pixelOffset: new google.maps.Size(0, -5), maxWidth: 350, position: posit, ID: "pos_i"});

var pos_mark = new google.maps.Marker({map: map, position: posit, clickable: true, draggable: true, ID: "pos_m", icon: therm2});

pos_mark.addListener('mouseup', function () {
var lat = pos_mark.getPosition().lat();
lat = lat.toFixed(4)
var lng = pos_mark.getPosition().lng();
lng = lng.toFixed(4)
var contentString = "<iframe class='info' src='pos_info.php?lat="+lat+"&lng="+lng+"'></iframe>"
pos_info.setContent(contentString);
pos_info.open(map, pos_mark);
})

谷歌地图 - 多个标记 - 1 InfoWindow问题

5 个答案: