API Карт Google v3 - маркеры Все Share The same InfoWindow
Я копался повсюду, и я не могу понять этого. Это сводит меня с ума! Я новичок в javascript в целом, поэтому я не могу полностью перенести перевод, который бы исправить мою проблему. Я заметил, что у многих людей есть эта проблема, но все они, кажется, используют более продвинутый (или просто запутывающий) код, чем я. В любом случае, вот и все!
У меня возникла проблема, когда все мои маркеры имеют один и тот же контент.
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);
});
}
}
Я знаю, что я дерьмовый, но кто-то, пожалуйста, помогите мне!: P
Ответы
Ответ 1
Проблема заключается в том, что вы устанавливаете прослушиватель событий для щелчка маркера в цикле. Таким образом, все маркеры в конечном итоге получают контент для последнего из ваших маркеров. Попробуйте это вместо этого. Создайте новую глобальную функцию:
function 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);
});
с этим:
// add an event listener for this marker
bindInfoWindow(marker, map, infowindow, club[3]);
Ответ 2
При установке объекта маркера (var marker = new...) измените эту строку: "title: club [0]," to "title: club [i],". Да, просто измените значение 0 на i.
Это должно решить проблему.
Попробуйте эту ссылку для учебника по API Карт Google с примерами.
http://code.google.com/apis/maps/documentation/javascript/tutorial.html
Это должно быть очень легко и полезно.