Javascript 如何将信息窗口添加到标记事件侦听器_Javascript_Google Maps_Google Maps Markers_Marker_Infowindow

Javascript 如何将信息窗口添加到标记事件侦听器

javascript google-maps

Javascript 如何将信息窗口添加到标记事件侦听器,javascript,google-maps,google-maps-markers,marker,infowindow,Javascript,Google Maps,Google Maps Markers,Marker,Infowindow,我尝试在单击特定标记时添加信息窗口。目前，我有3个下拉菜单与不同的位置，因为当他们被选中时，它会添加一个标记到地图。如何将添加信息窗口和一些内容合并到每个标记中这是我正在使用的代码 const locationSelect=document.getElementById'location-select'；常量标记=[]；常量坐标={ 大本古德：{ 拉脱维亚：51.5007，液化天然气：-0.1246}， const infoWindows=[]；常量myInfoWindows={ b

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

这是我正在使用的代码

}问题不清楚您是否希望为添加到地图的每个标记添加一个新的信息窗口或重复使用同一标记。其效果与每次使用下拉菜单进行新选择时从地图中删除所有标记相同。也不清楚您希望添加到信息窗口的内容，但希望是following将在这方面发挥作用

上面有几个错误-分配const markers=[]；会产生错误Uncaught TypeError:Assignment to constant variable，因此应该将其更改为var或let。在我看来，清除标记时最好完全重置标记数组

<!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>

上述结果如下：

您尝试了什么？什么不起作用？我甚至没有看到在您共享的代码中创建信息窗口的尝试。@MrUpsidown我已经添加了我以前尝试过的内容。您的代码段中存在语法错误。请提供一个示例来说明您的问题。抱歉，我应该指定为每个标记添加新的信息窗口。看起来是这样的这就像它可以在信息窗口中除去不必要的信息，如lat、long和location name。我猜我只需要从let content=[]部分删除这些部分？是的-变量内容用于使信息窗口内容在适用时进行编辑，，，，非常棒，再次感谢您的帮助！