[英]How to dynamically add infowindows to markers on a google map?
下面的代码是我针对此问题的设置,效果很好
var map;
var markers = [];
var contentString = '<h1>This is the Title!</h1>';
function initialize() {
var losAngeles = new google.maps.LatLng(34.0500, -118.2500);
var mapOptions = {
zoom: 10,
center: losAngeles,
disableDefaultUI: true,
mapTypeControlOptions: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function addMarker(location) {
var markerOptions = {
position: location,
map: map
}
var marker = new google.maps.Marker(markerOptions);
markers.push(marker);
}
function setAllMap(map) {
for (var i = 0; i < markers.length;i++) {
markers[i].setMap(map);
}
}
function clearMarkers() {
setAllMap(null);
}
function showMarkers() {
setAllMap(map);
}
function deleteMarkers() {
clearMarkers();
markers = [];
}
function addInfoWindow() {
infowindow = new google.maps.InfoWindow({
content: contentString
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
$('#thurs').on('click', function() {
deleteMarkers();
// Loads the markers
addMarker(new google.maps.LatLng(34.0500, -118.2500));
markers[0].infowindow = new google.maps.InfoWindow({
content: contentString
});
console.log(markers[0].infowindow);
google.maps.event.addListener(markers[0], 'click', function() {
this.infowindow.open(map,this);
});
setAllMap(map);
});
})
现在,我的问题是为每个标记添加多个标记和一个相应的信息窗口。 我的代码(jQuery)如下所示:
for(var i=0;i<locations.length;i++) {
if(locations[i].start.slice(0, 10) == "2015-04-10") {
addMarker(new google.maps.LatLng(parseFloat(locations[i].lat), parseFloat(locations[i].lng)));
}
}
console.log(markers);
for(var i=0;i<markers.length;i++) {
markers[i].infowindow = new google.maps.InfoWindow({
content: contentString
});
}
for(var i=0;markers.length;i++) {
console.log(markers[i].infowindow);
google.maps.event.addListener(markers[i], 'click', function() {
markers[i].infowindow.open(map,markers[i]);
});
}
当我这样做时,出现以下错误:
遗漏的类型错误:未定义无法读取属性“信息窗口”。
问题是您不应在事件侦听器中引用“ i”。 当您单击标记时,我是markers.length。 以下事件侦听器将起作用:
google.maps.event.addListener(markers[i], 'click', function() {
this.infowindow.open(map, this);
});
这是一个代码片段来演示:
<!DOCTYPE html xmlns:xlink="http://www.w3.org/1999/xlink">> <head lang="en"> <meta charset="UTF-8"> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <script> var map; var markers = []; var contentString = '<h1>This is the Title!</h1>'; function initialize() { var losAngeles = new google.maps.LatLng(34.0500, -118.2500); var mapOptions = { zoom: 10, center: losAngeles, disableDefaultUI: true, mapTypeControlOptions: google.maps.MapTypeId.SATELLITE }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); addMarkers(); } function addMarker(location) { var markerOptions = { position: location, map: map } var marker = new google.maps.Marker(markerOptions); markers.push(marker); } var locations = [{ start: "2015-04-10", lat: 34.0500, lng: -118.2500 }]; function addMarkers() { for (var i = 0; i < locations.length; i++) { if (locations[i].start.slice(0, 10) == "2015-04-10") { addMarker(new google.maps.LatLng(parseFloat(locations[i].lat), parseFloat(locations[i].lng))); } } for (var i = 0; i < markers.length; i++) { markers[i].infowindow = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListener(markers[i], 'click', function() { this.infowindow.open(map, this); }); } } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.