我想问一下如何在Google地图中为标记添加信息窗口。条件是,我必须在地图上创建一个包含多个标记的程序。但是我如何为每个标记提供指定的信息窗口?
这是我现在的代码:
var markers = [];
var map;
var labels = 'ABCD';
var labelIndex = 0;
function initialize() {
map = new google.maps.Map(
document.getElementById("map"), {
center: new google.maps.LatLng(40.7127837, -74.0059413),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// New York, NY, USA (40.7127837, -74.0059413)
// Newark, NJ, USA (40.735657, -74.1723667)
// Jersey City, NJ, USA (40.72815749999999, -74.07764170000002)
// Bayonne, NJ, USA (40.6687141, -74.11430910000001)
addMarker({
lat: 40.7127837,
lng: -74.0059413
}, "red");
addMarker({
lat: 40.735657,
lng: -74.1723667
}, "green");
addMarker({
lat: 40.7281575,
lng: -74.0776417
}, "yellow");
addMarker({
lat: 40.6687141,
lng: -74.1143091
}, "orange");
}
google.maps.event.addDomListener(window, "load", initialize);
function addMarker(location, color) {
var marker = new google.maps.Marker({
position: location,
label: labels[labelIndex++ % labels.length],
icon: {
url: 'http://maps.google.com/mapfiles/ms/icons/' + color + '.png',
labelOrigin: new google.maps.Point(15, 10)
},
map: map
});
markers.push(marker);
}
有人可以给我一个解决方法来解决我的问题吗?
答案 0 :(得分:2)
你可以这样做:
var markers = [];
var map;
var labels = 'ABCD';
var labelIndex = 0;
function initialize() {
map = new google.maps.Map(
document.getElementById("map"), {
center: new google.maps.LatLng(40.7127837, -74.0059413),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// New York, NY, USA (40.7127837, -74.0059413)
// Newark, NJ, USA (40.735657, -74.1723667)
// Jersey City, NJ, USA (40.72815749999999, -74.07764170000002)
// Bayonne, NJ, USA (40.6687141, -74.11430910000001)
addMarker({
lat: 40.7127837,
lng: -74.0059413
}, "red", "New York is awesome!");
addMarker({
lat: 40.735657,
lng: -74.1723667
}, "green", "Newark is also cool!");
addMarker({
lat: 40.7281575,
lng: -74.0776417
}, "yellow", "Do not forget Jersey City!");
addMarker({
lat: 40.6687141,
lng: -74.1143091
}, "orange", "And not to mention Bayonne, too!");
}
google.maps.event.addDomListener(window, "load", initialize);
function addMarker(location, color, content) {
var infowindow = new google.maps.InfoWindow({
content: content
});
var marker = new google.maps.Marker({
position: location,
label: labels[labelIndex++ % labels.length],
icon: {
url: 'http://maps.google.com/mapfiles/ms/icons/' + color + '.png',
labelOrigin: new google.maps.Point(15, 10)
},
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
markers.push(marker);
}