文章/答案/技术大牛

发布

社区首页 >问答首页 >Google地图删除工作效率过高的标记

问Google地图删除工作效率过高的标记
EN

Stack Overflow用户

提问于 2017-04-16 17:09:37

回答 2查看 111关注 0票数 0

我正在尝试通过refreshDiv()函数实时更新标记，我已经尝试了如何添加标记+通过addMarker()和删除所有标记。但是，当调用clearMarkers()时，它会彻底清除它们。

是否有一种方法来设置标记的位置，然后将其移动到下一个位置。

进一步解释

我正在做一个需要显示每个标记的位置的项目，为此，我需要更新标记的位置，当更新它之前留下的标记的位置时，我使用clearMarkers()，但这会删除所有标记。我需要它移除以前的标记，但把最近的留在那里。

<!DOCTYPE html>
    <html>
      <head>
      <title>Remove Markers</title>
        <style>

          #map {
            height: 100%;
          }

          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
        </style>


    </head>
    <body onload='refreshDiv()'>

    <div id="map"></div>

    <p>Click on the map to add markers.</p>
    <script>


      var map;
      var markers = [];

    **//this is were the problem lies**

        function refreshDiv()
        {
         addMarker(37.769,-122.446);
         var refresher = setTimeout('refreshDiv()', 3000);
         clearMarkers();
        }

      function initMap() {
        var haightAshbury = {lat: 37.769, lng: -122.446};

        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
          center: haightAshbury,
          mapTypeId: 'terrain'
        });

        // This event listener will call addMarker() when the map is clicked.


        // Adds a marker at the center of the map.
        addMarker(haightAshbury);
      }

       // Adds a marker to the map and push to the array.
      function addMarker(location) {
        var marker = new google.maps.Marker({
          position: location,
          map: map
        });
        markers.push(marker);
      }

      // Sets the map on all markers in the array.
      function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }

      // Removes the markers from the map, but keeps them in the array.
      function clearMarkers() {
        setMapOnAll(null);
      }

      // Shows any markers currently in the array.
      function showMarkers() {
        setMapOnAll(map);
      }

      // Deletes all markers in the array by removing references to them.
      function deleteMarkers() {
        clearMarkers();
        markers = [];
      }

    </script>
      <script async defer
        src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBVQaENEYHY2g-mRhD6_tj1cSK8DhQoqHI&callback=initMap'>
        </script>
    </body>
    </html>

javascript

html

google-maps-api-3

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-04-16 17:36:04

您的代码在设置最后位置后清除标记，因此无法看到最终标记。将clearMarkers()作为refreshDiv中的第一个调用解决了这个问题。请看下面的代码：

<!DOCTYPE html>
    <html>
      <head>
      <title>Remove Markers</title>
        <style>

          #map {
            height: 100%;
          }

          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
        </style>


    </head>
    <body onload='refreshDiv()'>

    <div id="map"></div>

    <p>Click on the map to add markers.</p>
    <script>


      var map;
      var markers = [];

  //this is were the problem lies**

        function refreshDiv()
        {
         clearMarkers();
         var position = new google.maps.LatLng(37.769,-122.446);
         addMarker(position);
         var refresher = setTimeout('refreshDiv()', 3000);
         
        }

      function initMap() {
        //var haightAshbury = {lat: 37.769, lng: -122.446};
        var haightAshbury = new google.maps.LatLng(37.769, -122.446);    

        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
          center: haightAshbury,
          mapTypeId: 'terrain'
        });
         
        // This event listener will call addMarker() when the map is clicked.


        // Adds a marker at the center of the map.
        addMarker(haightAshbury);
      }

       // Adds a marker to the map and push to the array.
      function addMarker(location) {
        var marker = new google.maps.Marker({
          position: location,
          map: map
        });
        markers.push(marker);
      }

      // Sets the map on all markers in the array.
      function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }

      // Removes the markers from the map, but keeps them in the array.
      function clearMarkers() {
        setMapOnAll(null);
      }

      // Shows any markers currently in the array.
      function showMarkers() {
        setMapOnAll(map);
      }

      // Deletes all markers in the array by removing references to them.
      function deleteMarkers() {
        clearMarkers();
        markers = [];
      }

    </script>
      <script async defer
        src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBVQaENEYHY2g-mRhD6_tj1cSK8DhQoqHI&callback=initMap'>
        </script>
    </body>
    </html>

票数 1

Stack Overflow用户

发布于 2017-04-16 17:32:54

我有点困惑，但据我所见，您需要先清除标记，然后添加新的标记

    function refreshDiv()
    {
     clearMarkers();
     addMarker(new google.maps.LatLng(37.769, -122.446));
     setMapOnAll(map)
     var refresher = setTimeout('refreshDiv()', 3000);

    }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43439793

复制

相似问题

问Google地图删除工作效率过高的标记
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google地图删除工作效率过高的标记EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google地图删除工作效率过高的标记
EN