Google Maps API v3 - 标记全部共享相同的InfoWindow [英] Google Maps API v3 - Markers All Share The Same InfoWindow

问题描述

我一直在到处挖掘，我似乎无法弄清楚这一点。这让我疯狂！我一般都是JavaScript的新手，所以我不能很好地指出翻译能够解决我的问题。我注意到很多人都有这个问题，但他们似乎都使用比我更先进（或者只是令人困惑）的代码。无论如何，这里就是这样！

一直有问题，我所有的标记共享相同的内容。

 函数初始化（）{
 var myOptions = {
 center：new google.maps.LatLng（34.151271，-118.449537），
 zoom：9，
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 mapTypeControl：false ，
 streetViewControl：false，
 panControl：false，
 zoomControl：true，
 zoomControlOptions：{style：google.maps.ZoomControlStyle.SMALL}，
}; 
 
 var map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; 
 
 setMarkers（地图，俱乐部）; 
 
 
 
 var clubs = [
 ['Poop'，34.223868，-118.601575，'Dookie']，
 ['Test Poop'， 34.151271，-118.449537，'测试业务'] 
]; 
 
 function setMarkers（map，locations）{
 var image = new google.maps.MarkerImage（'images / image.png'，
 google.maps.Size（25 ，32），
 new google.maps.Point（0,0），
 new google.maps.Point（0，32）
）; 
 var shape = {
 coord：[1，1，20，18，20，18，1]，
类型：'poly'
}; 
 for（var i = 0; i< locations.length; i ++）{
 var club = locations [i]; 
 var myLatLng = new google.maps.LatLng（club [1]，club [2]）; 
 var infowindow = new google.maps.InfoWindow（）; 
 var marker = new google.maps.Marker（{
 position：myLatLng，
 map：map，
 icon：image，
 shape：shape，
标题：俱乐部[0]，
}）; 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.setContent（club [3]）; 
 infowindow.open（map，this）; 
}）; 
} 
} 
  

我知道我很糟糕，但有人请帮忙我！ ：P

解决方案

问题是因为您正在为循环内的标记点击设置事件侦听器。因此，所有标记最终只会获得最后一个标记的内容。试试这个。创建一个新的全局函数：

 函数bindInfoWindow（marker，map，infowindow，html）{
 marker.addListener 'click'，function（）{
 infowindow.setContent（html）; 
 infowindow.open（map，this）; 
}）; 
} 
  

然后在你的循环中替换这个：

  google.maps.event.addListener（marker，'click'，function（）{
 infowindow.setContent（club [3]）; 
 infowindow.open（map，this）; 
}）; 
  

用这个：

  //为这个标记添加一个事件监听器
 bindInfoWindow（marker，map，infowindow，club [3]）; 
  

I've been digging around everywhere and I can't seem to figure this out. It's driving me crazy! I'm a newbie to javascript in general, so I can't quite put a finger on the translation that would fix my issue. I noticed that a lot of people have this problem, but they all seem to use more advanced(or just confusing) code than I. Anyway, here goes!

I've been having the problem where all of my markers share the same content.

function initialize() {
var myOptions = {
    center: new google.maps.LatLng(34.151271, -118.449537),
    zoom: 9,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false,
    panControl: false,
    zoomControl: true,
    zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL },
};

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

setMarkers(map, clubs);

}

var clubs = [
['Poop', 34.223868, -118.601575, 'Dookie'],
['Test Poop', 34.151271, -118.449537, 'Test Business']
];

function setMarkers(map, locations) {
var image = new google.maps.MarkerImage('images/image.png',
    new google.maps.Size(25, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 32)
);
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var club = locations[i];
var myLatLng = new google.maps.LatLng(club[1], club[2]);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: image,
    shape: shape,
    title: club[0],
});
google.maps.event.addListener(marker, 'click', function(){
    infowindow.setContent(club[3]);
    infowindow.open(map, this);
});
}
}

I know I'm crappy, but someone please help me! :P

解决方案

The problem is because you're setting the event listener for the marker click within a loop. So all the markers end up only getting the content for the last of your markers. Try this instead. Create a new global function:

function bindInfoWindow(marker, map, infowindow, html) {
    marker.addListener('click', function() {
        infowindow.setContent(html);
        infowindow.open(map, this);
    });
} 

Then within your loop, replace this:

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

with this:

// add an event listener for this marker
bindInfoWindow(marker, map, infowindow, club[3]); 

这篇关于Google Maps API v3 - 标记全部共享相同的InfoWindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！