删除谷歌标记[重复]答案

【问题标题】：Removing Google Markers [duplicate]删除谷歌标记[重复]
【发布时间】：2017-09-12 02:21:17
【问题描述】：

下面的代码会加载谷歌地图并每隔一秒左右刷新一次标记的位置。问题是代码会一遍又一遍地写入标记的位置。有没有办法在编写新标记之前删除以前的标记？

问题在于，当它清除标记 clearOverlays(); 时，它不会更新新标记。

任何帮助或建议将不胜感激。

这个问题与之前的问题不同，因为问题是在调用 clearOverlays(); 时出现的。从函数 refreshDiv() 它不会更新。

<!DOCTYPE html>
<html>
  <head>


    <style>

      #map {
        height: 100%;
      }

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



  </head>
  <body onload='refreshDiv()'>
    <div id='map'></div>");




    <script>


    function refreshDiv()
    {
     clearOverlays();
     var refresher = setTimeout('refreshDiv()', 1000);
     updateMarker(map); 
    }


    function initMap()
     {
          window.map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10,
          center: {lat: ".$latitude.", lng: ".$longitude."}
        });
     }


 function clearOverlays()
 {
  for (var i = 0; i < marker.length; i++ )
   {
    marker[i].setMap(null);
   }
   marker.length = 0;


   for (var i = 0; i < beach.length; i++ )
   {
    beach[i].setMap(null);
   }
   beach.length=0;
 }




      function updateMarker(map)
      {

      var beaches = [['"Jim"', 55.0102686,-1.5847956999999724],];


        var image = {
          url: '1.png',
          // This marker is 20 pixels wide by 32 pixels high.
          size: new google.maps.Size(20, 32),
          // The origin for this image is (0, 0).
          origin: new google.maps.Point(0, 0),
          // The anchor for this image is the base of the flagpole at (0, 32).
          anchor: new google.maps.Point(0, 32)
        };



        var shape = {
          coords: [1, 1, 1, 20, 18, 20, 18, 1],
          type: 'poly'
        };

        for (var i = 0; i < beaches.length; i++) {
          window.beach = beaches[i];
          window.marker = new google.maps.Marker({
            position: {lat: beach[1], lng: beach[2]},
            map: map,
            icon: image,
            shape: shape,
            title: beach[0],
            zIndex: beach[3]
          });
        }
      }


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

【解决方案1】：

根据我的假设，您需要更新标记。如果我是正确的，请检查以下答案。正如我已经定义了他们的标记动态更新他们的。

https://stackoverflow.com/a/43435488/7668554

【讨论】：

感谢大家的帮助。但不能真正使用这些答案中的任何一个。原谅我的无知..

【解决方案2】：

希望这个例子有帮助！

<!DOCTYPE html>
<html>
  <head>
    <title>Remove Markers</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #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: 25%;
        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;
      }
    </style>
  </head>
  <body>
    <div id="floating-panel">
      <input onclick="clearMarkers();" type=button value="Hide Markers">
      <input onclick="showMarkers();" type=button value="Show All Markers">
      <input onclick="deleteMarkers();" type=button value="Delete Markers">
    </div>
    <div id="map"></div>
    <p>Click on the map to add markers.</p>
    <script>

      // In the following example, markers appear when the user clicks on the map.
      // The markers are stored in an array.
      // The user can then click an option to hide, show or delete the markers.
      var map;
      var markers = [];

      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.
        map.addListener('click', function(event) {
          addMarker(event.latLng);
        });

        // 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=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

【讨论】：

谢谢。在谷歌上看到过，但问题是代码清除了标记但没有再次更新它们。我添加了 clearOverlays();但这似乎不允许之后进行更新。有什么想法吗？
有一个类似的问题，您可以尝试该解决方案。我认为它应该工作。 stackoverflow.com/questions/8229827/…
我很久以前就研究过 Google maps api。我会尝试在我的旧代码文件中找出我是如何做到的。