如何将信息 windows 添加到标记事件侦听器

Question

我正在尝试在单击特定标记时添加信息 windows。目前我有 3 个带有不同位置的下拉菜单，当它们被选中时，它会在地图上添加一个标记。如何将添加信息 windows 与某些内容合并到每个标记中？

这是我正在使用的代码

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);
  });

Answer 1

从问题中不清楚您是希望为添加到地图的每个标记添加一个新的信息窗口还是重复使用相同的标记。每次使用下拉菜单进行新选择时，效果与您从地图中删除所有标记相同。还不清楚您希望向 infowindow 添加哪些内容，但希望以下内容在这方面有用。

上面有几个错误 - 分配 const markers=[]; 会产生错误 Uncaught TypeError: Assignment to constant variable，因此应将其更改为 var 或 let。当您清除标记时，您最好完全重置 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

上面的结果如下：

如何将信息 windows 添加到标记事件侦听器

How can I add info windows to a marker event listener

javascript

google-maps

infowindow

marker

google-maps-markers