个人中心
gpt4 book ai didi

javascript - 从简单的 Google map v3 示例中删除标记

转载 作者：行者123 更新时间：2023-12-02 19:16:22 24 4
gpt4 key购买 nike

我是 Javascript 初学者，正在尝试了解 Google Maps API v3 的工作原理。在此网站上找到了一个问题的很好答案，这是得票最多的答案。 Google Maps JS API v3 - Simple Multiple Marker Example 

> <!DOCTYPE html> <html>  <head>    <meta http-equiv="content-type"
> content="text/html; charset=UTF-8" />    <title>Google Maps Multiple
> Markers</title>    <script
> src="http://maps.google.com/maps/api/js?sensor=false" 
>           type="text/javascript"></script> </head>  <body>   <div id="map" style="width: 500px; height: 400px;"></div>
> 
>   <script type="text/javascript">
>     var locations = [
>       ['Bondi Beach', -33.890542, 151.274856, 4],
>       ['Coogee Beach', -33.923036, 151.259052, 5],
>       ['Cronulla Beach', -34.028249, 151.157507, 3],
>       ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
>       ['Maroubra Beach', -33.950198, 151.259302, 1]
>     ];
> 
>     var map = new google.maps.Map(document.getElementById('map'), {
>       zoom: 10,
>       center: new google.maps.LatLng(-33.92, 151.25),
>       mapTypeId: google.maps.MapTypeId.ROADMAP
>     });
> 
>     var infowindow = new google.maps.InfoWindow();
> 
>     var marker, i;
> 
>     for (i = 0; i < locations.length; i++) {  
>       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);
>         }
>       })(marker, i));
>     }   </script> </body> </html>

这就像一个魅力，但现在我正在尝试实现一个删除特定标记的功能。无论我尝试做什么都会使代码崩溃。我最后的尝试是调用一个函数来删除所有标记，如下所示:

    function deleteMarker(){
    for (i = 0; i < locations.length; i++) { 

        marker.setMap(null);
    }
}

这仍然不起作用。

我在这里缺少什么？感谢所有帮助，因为我花了几个小时试图解决这个问题......

最佳答案

您将在每个循环中覆盖标记对象，因此您的函数deleteMarker将只能删除最后一个标记。

将创建的标记存储在某处(位置数组是一个好地方):

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

现在您可以稍后访问标记对象:

function deleteMarker(m){
    for (i = 0; i < locations.length; i++) { 
         if(m===locations[i][3]){
          locations[i][4].setMap(null);
         } 
    }
}

关于javascript - 从简单的 Google map v3 示例中删除标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13087800/

24 4 0
文章推荐： php - 使用 Codeigniter 循环遍历此 json 对象 (jquery)
文章推荐： javascript - jqueryUI 可排序 : Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3
文章推荐： javascript - 在python服务器上执行程序并在html网页上动态更新结果
文章推荐： JavaScript 哈希标签解析函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com