问题描述
我正在尝试在单击特定标记时添加信息窗口。目前我有 3 个带有不同位置的下拉菜单，当它们被选中时，它会在地图上添加一个标记。如何将添加信息窗口和一些内容添加到每个标记？
这是我正在使用的代码
const locationSelect = document.getElementById('location-select');
const markers = [];
const myCoordinates = {
"bigBenCoords" : {
"lat": 51.5007,"lng": -0.1246},const infoWindows = [];
const myInfoWindows = {
"bigBenInfo" :
{"content": "Big Ben is a historic landmark in London and has become one of the major and most easily recognisable landmarks of the city. The name 'Big Ben' is the name for the clock in Elizabeth's Tower - the tallest tower in the Palace of Westminster."}
};
function removeMarkers() {
markers.forEach(marker => {
marker.setMap(null); // disconnect each marker.
});
markers.length = 0; // This empties the array.
}
function createMarker(coordinates,map) {
const marker = new google.maps.Marker({
position: coordinates,animation: google.maps.Animation.DROP,map
});
markers.push(marker); // Add the marker to the array to save the reference.
}
function removeInfoWindows() {
infoWindows.forEach(inforWindow => {
infoWindow.setMap(null);
});
infoWindows.length = 0;
}
function addInfoWindow(coordinates,map) {
const infoWindow = new google.maps.InfoWindow({
content: infoWindows,map
});
infoWindows.push(infoWindow);
}
function initMap() {
const map = new google.maps.Map(document.getElementById("map"),{
zoom: 12,center: {
lat: 51.509865,lng: -0.118092
}
});
locationSelect.addEventListener('change',() => {
const location = locationSelect.value;
const coordinates = myCoordinates[location];
const content = myInfoWindows[content];
removeMarkers(); // First remove all markers.
createMarker(coordinates,map); // Then add the marker.
removeInfoWindows();
addInfoWindow(content,map);
});解决方法
从问题中不清楚您是希望为添加到地图的每个标记添加一个新的信息窗口还是重新使用相同的标记。效果与每次使用下拉菜单进行新选择时从地图中删除所有标记的效果相同。也不清楚您希望向 infowindow 添加哪些内容，但希望以下内容能在这方面有所帮助。
上面有几个错误 - 分配 const markers=[]; 会产生错误 Uncaught TypeError: Assignment to constant variable，因此应将其更改为 var 或 let。当你清除标记时，你会更好，imo，完全重置 markers 数组
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Google Maps: </title>
<style>
#map{
width:800px;
height:600px;
float:none;
margin:auto;
}
</style>
<script>
let markers = [];
const myCoordinates = {
"bigBenCoords" : {
"lat": 51.5007,"lng": -0.1246,'description':"Big Ben is a historic landmark in London and has become one of the major and most easily recognisable landmarks of the city. The name 'Big Ben' is the name for the clock in Elizabeth's Tower - the tallest tower in the Palace of Westminster."
},"westminsterAbbeyCoords" : {
"lat":51.4987,"lng":-0.1289,'description':"Westminster Abbey,formally titled the Collegiate Church of Saint Peter at Westminster,is a large,mainly Gothic abbey church in the City of Westminster,London,England,just to the west of the Palace of Westminster."
},'buckpalace':{
lat:51.501399,lng:-0.141761,'description':"Buckingham Palace is the London residence and administrative headquarters of the monarch of the United Kingdom. Located in the City of Westminster,the palace is often at the centre of state occasions and royal hospitality. It has been a focal point for the British people at times of national rejoicing and mourning"
},'downingst':{
lat:51.503302,lng:-0.127452,'description':"Downing Street is a street in central London that houses the official residences and offices of the Prime Minister of the United Kingdom and the Chancellor of the Exchequer. Situated off Whitehall,a few minutes' walk from the Houses of Parliament,Downing Street was built in the 1680s by Sir George Downing"
}
}
function initMap() {
const map = new google.maps.Map( document.getElementById("map"),{
zoom: 12,center: {
lat:51.509865,lng:-0.118092
}
});
function removeMarkers() {
markers.forEach(marker => {
marker.setMap(null);
});
markers=[];
}
function createMarker( coordinates,map,value ) {
const marker = new google.maps.Marker({
position: coordinates,value:value,animation: google.maps.Animation.DROP,map
});
markers.push( marker );
setTimeout(()=>{
/*
Where is the content to be derived? This simply
displays the selected text from dropdown and the lat/lng
*/
let content=[
'Location='+value,'Lat='+marker.position.lat(),'Lng='+marker.position.lng(),'Description'+myCoordinates[value].description
].join(',');
let infowindow=new google.maps.InfoWindow({maxWidth:300});
infowindow.setContent( content )
infowindow.setPosition( marker.position );
infowindow.open( map,marker );
},1000);
}
const changehandler=function(e){
const coordinates = myCoordinates[ this.value ];
removeMarkers();
createMarker(coordinates,this.value );
}
document.querySelectorAll('select.location-select').forEach( sel=>{
sel.addEventListener('change',changehandler)
})
}
</script>
<script async defer src='//maps.googleapis.com/maps/api/js?key=apikey&callback=initMap'></script>
</head>
<body>
<select class='location-select'>
<option selected disabled hidden>Select
<option>buckpalace
<option>downingst
</select>
<select class='location-select'>
<option selected disabled hidden>Select
<option>westminsterAbbeyCoords
</select>
<select class='location-select'>
<option selected disabled hidden>Select
<option>bigBenCoords
</select>
<div id='map'></div>
</body>
</html>
上面的结果如下：
