(PS-是的，我查看了这个相关的stackoverflow和这个博客，都没有解决我的问题，也许我在其他地方犯了一些明显的错误？
我正在尝试让多个不同的信息窗口显示在我的谷歌地图上。当我的侦听器设置为：
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent( this.html );
infoWindow.open( map, this );
});
然后，所有标记的信息窗口都完全空白。
当我的侦听器设置为仅
：google.maps.event.addListener(marker, 'click', function() {
infoWindow.open( map, this );
});
然后信息窗口弹出标题，但只有每个数组中的最后一个标题显示在所有标记上。
这是我的谷歌地图JavaScript代码的全部内容：
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 35.6895, lng: 139.6917},
zoom: 13,
mapTypeId: 'roadmap'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
/*var markers = [];*/
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
setMarkers(map, food);
setMarkers(map, views);
}
var views = [
//Tokyo
['Tokyu Plaza Omotesando Harajuku', 35.66871, 139.70598, 0],
['Shinjuku', 35.69384, 139.70354, 0],
['Robot Restaurant', 35.69431, 139.70284, 0],
['Shinjuku Crossing Intersection', 35.65945, 139.70061, 0],
['Starbucks Tokyu Plaza', 35.66886, 139.70603, 0]
];
var food = [
//Tokyo
['2Chome Tsukemen Gachi', 35.69126, 139.70853, 1],
['Tsukiji Fish Market', 35.66548, 139.77066, 1],
['Tonkatsu Tonki', 35.6336, 139.71429, 1],
];
function setMarkers(map, locations) {
// Add markers to the map
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var locale = locations[i];
var myLatLng = new google.maps.LatLng(locale[1], locale[2]);
var icon_to_use;
var infowindow = null;
if(locale[3] < 1 ){
icon_to_use = new google.maps.MarkerImage('img/views.png', new google.maps.Size(40, 40), new google.maps.Point(0,0), new google.maps.Point(0, 32));
}
else {
icon_to_use = new google.maps.MarkerImage('img/food.png', new google.maps.Size(40, 40), new google.maps.Point(0,0), new google.maps.Point(0, 32));
}
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: icon_to_use,
info: locale[0],
shape: shape,
zIndex: locale[3] //someday I will tie this zIndex to how a place is ranked//
});
infoWindow = new google.maps.InfoWindow({
content: locale[0]
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent( this.html );
infoWindow.open( map, this );
});
}
}如何让独特的标题显示在各自的信息窗口中？
您的标记没有 html 属性，因此这不会在 InfoWindow 中设置任何内容：
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent( this.html );
infoWindow.open( map, this );
});
使用 info 属性(这是您想要的(，或将其重命名为 html ：
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: icon_to_use,
info: locale[0]
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent( this.info);
infoWindow.open( map, this );
});
概念验证小提琴
代码片段：
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 35.6895,
lng: 139.6917
},
zoom: 13,
mapTypeId: 'roadmap'
});
// create the shared InfoWindow
infoWindow = new google.maps.InfoWindow();
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
setMarkers(map, food);
setMarkers(map, views);
}
var views = [
//Tokyo
['Tokyu Plaza Omotesando Harajuku', 35.66871, 139.70598, 0],
['Shinjuku', 35.69384, 139.70354, 0],
['Robot Restaurant', 35.69431, 139.70284, 0],
['Shinjuku Crossing Intersection', 35.65945, 139.70061, 0],
['Starbucks Tokyu Plaza', 35.66886, 139.70603, 0]
];
var food = [
//Tokyo
['2Chome Tsukemen Gachi', 35.69126, 139.70853, 1],
['Tsukiji Fish Market', 35.66548, 139.77066, 1],
['Tonkatsu Tonki', 35.6336, 139.71429, 1],
];
function setMarkers(map, locations) {
// Add markers to the map
for (var i = 0; i < locations.length; i++) {
var locale = locations[i];
var myLatLng = new google.maps.LatLng(locale[1], locale[2]);
var icon_to_use;
var infowindow = null;
if (locale[3] < 1) {
icon_to_use = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
} else {
icon_to_use = 'http://maps.google.com/mapfiles/ms/micons/green.png';
}
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: icon_to_use,
info: locale[0],
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(this.info);
infoWindow.open(map, this);
});
}
}
google.maps.event.addDomListener(window, "load", initAutocomplete);html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>
<input id="pac-input" />
<div id="map"></div>