如何从 GoogleMapsAPI 中的静态数组中删除特定标记

debugcn 发表于 Dev

莱蒂西亚·卡梅纳尔

我正在学习 Google Maps API，并且我使用了一些示例代码来构建带有一些标记的地图。我想通过双击按钮删除特定标记，但我无法理解如何构建此删除功能

有谁知道如何做到这一点？

这是我的代码：

<div id="map"></div>
      <script type="text/javascript">
      function initMap() {
            var locations = [
                ['sidewalk problem', -25.438421, -49.268500, 4],
                ['sidewalk problem', -25.437188, -49.269629, 5],
                ['sidewalk problem', -25.432213, -49.257521, 3],
                ['sidewalk problem',-25.433337, -49.275717,2],
                ['sidewalk problem',-25.435546, -49.278635,1],
            ];

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 15,
                center: new google.maps.LatLng(-25.438421, -49.268500),
            });

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

            for (i = 0; i < locations.length; i++) {  
                locations[i][4] 
                    = marker 
                        = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                    position = i;

            }
            })(marker, i));


        }

氡

由于您要绘制多个位置，我相信每个Google Maps Javascript API Marker 最好使用您创建的自定义属性'id'将其推送到'markers array' 中。

然后使用循环遍历每个数组值（标记）及其索引。有了这个，您将附加一个Google Maps Javascript API Events 'dblclick'以删除该特定标记。

for (var i = 0; i < locations.length; i++) {  
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        id : i,
        title : 'Marker ID: '+i
    });  
    markers.push(marker);
    markers[i].addListener('dblclick',function(e){
      markers[this.id].setMap(null);
    });         
}

我在下面创建了一个示例演示，其中在触发'dblclick'事件后将删除特定标记。此应用程序还有一些按钮，可根据其指定的标记索引删除'dblclick'上的特定标记。

      
      var map;
      var markers = [];      
      function initMap() {
            var locations = [
                ['sidewalk problem', -25.438421, -49.268500, 4],
                ['sidewalk problem', -25.437188, -49.269629, 5],
                ['sidewalk problem', -25.432213, -49.257521, 3],
                ['sidewalk problem',-25.433337, -49.275717,2],
                ['sidewalk problem',-25.435546, -49.278635,1],
            ];     
            
            map = new google.maps.Map(document.getElementById('map'), {
              center: new google.maps.LatLng(-25.438421, -49.268500),
              zoom: 15
            });

            for (var i = 0; i < locations.length; i++) {  
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map,
                    id : i,
                    title : 'Marker ID: '+i
                });  
                markers.push(marker);
                markers[i].addListener('dblclick',function(e){
                  markers[this.id].setMap(null);
                });         
            }  
            document.getElementById( 'button1' ).addEventListener( 'dblclick', function(){
                 markers[0].setMap(null);
            });
            document.getElementById( 'button2' ).addEventListener( 'dblclick', function(){
                 markers[1].setMap(null);
            }); 
            document.getElementById( 'button3' ).addEventListener( 'dblclick', function(){
                 markers[2].setMap(null);
            }); 
            document.getElementById( 'button4' ).addEventListener( 'dblclick', function(){
                 markers[3].setMap(null);
            }); 
            document.getElementById( 'button5' ).addEventListener( 'dblclick', function(){
                 markers[4].setMap(null);
            });        
      }

      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 22%;
        z-index: 5;
        background-color: #FFF;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

    <div id="floating-panel">
      <button id="button1">Delete Marker ID 0</button>
      <button id="button2">Delete Marker ID 1</button>
      <button id="button3">Delete Marker ID 2</button>
      <button id="button4">Delete Marker ID 3</button>
      <button id="button5">Delete Marker ID 4</button>
    </div>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&callback=initMap"
    async defer></script>

希望它可以帮助和快乐编码！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。