如何将信息窗口添加到标记事件侦听器 [重复]答案

【问题标题】：How can I add info windows to a marker event listener [duplicate]如何将信息窗口添加到标记事件侦听器 [重复]
【发布时间】：2021-06-15 17:39:47
【问题描述】：

我正在尝试在单击特定标记时添加信息窗口。目前，我有 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);
  });

【问题讨论】：

你试过什么？什么不起作用？我什至没有看到在您共享的代码中创建信息窗口的尝试。
@MrUpsidown 我已经添加了我之前尝试过的内容
您的代码 sn-p 中有语法错误。请提供一个 minimal reproducible example 来证明您的问题。

标签： javascript google-maps google-maps-markers marker infowindow

【解决方案1】：

如果您希望为添加到地图的每个标记添加新的信息窗口或重复使用相同的标记，问题并不清楚。每次使用下拉菜单进行新选择时，效果与您从地图中删除所有标记相同。目前还不清楚您希望向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, map, 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>

Proof of concept

上面的结果如下：

【讨论】：

抱歉，我应该指定我希望为每个标记添加新的信息窗口。看起来除了信息窗口中的纬度、经度和位置名称等不必要的信息外，它还可以工作。我猜我只需要从“let content = []”部分中删除这些部分？
是的 - 变量content 用于制作信息窗口内容，因此可以根据需要进行编辑，,,
太棒了，再次感谢您的帮助！