从谷歌地图中删除标记答案

【问题标题】：Delete Marker From Google Map从谷歌地图中删除标记
【发布时间】：2017-02-24 23:40:32
【问题描述】：

对不起，如果这是一个非常简单的问题并且我很笨，但是我在这里有一些代码，我正在从 MYSQL 中提取数据并将标记放置在地图中。我的标记位置发生了变化，所以我想在不重新加载页面的情况下更新标记位置。一切正常，但是在放置新标记之前我无法删除以前的标记。

正如您在我的代码中看到的那样，我什至尝试放置一个按钮（不是我需要的，只是为了看看我是否可以让它工作）来清除标记，但这甚至不起作用。

任何帮助将不胜感激:)

这是我的代码：

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>vRAF Link 16 Map</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>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        //<![CDATA[
        var markers = [];
        setInterval(function () {
            DeleteMarkers();
            Link16_2();
        }, 5000);

      function DeleteMarkers() {
            //Loop through all the markers and remove
            for (var i = 0; i < markers.length; i++) {
                markers[i].setMap(null);
            }


            markers = [];
        };   

        var customIcons = {
            bar: {
                icon: 'http://map.vraf.net/icon.png'
            }

        };

        var map = null;
        var infoWindow = null;
        function load() {
            map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(54.559322, -4.174804),
            zoom: 6,
            mapTypeId: 'satellite'
            });


            infoWindow = new google.maps.InfoWindow;

            // Change this depending on the name of your PHP file
            Link16_2();
        }

        function Link16_2() {    
              // Change this depending on the name of your PHP file
              downloadUrl("genxml_link16.php", function(data) {
                var xml = data.responseXML;
                var markers = xml.documentElement.getElementsByTagName("marker");

                for (var i = 0; i < markers.length; i++) {

                  var name = markers[i].getAttribute("name");
                  var callsign = markers[i].getAttribute("callsign");
                  var symbol = markers[i].getAttribute("symbol");

                  var point = new google.maps.LatLng(
                      parseFloat(markers[i].getAttribute("lat")),
                      parseFloat(markers[i].getAttribute("lon")));

                  var html = "<b>" + callsign + "</b> <br/>" + name;
                  var icon = customIcons[symbol] || {};
                  var marker = new google.maps.Marker({
                    map: map,
                    position: point,
                    icon: icon.icon
                  });

                   markers.push(marker);


                  bindInfoWindow(marker, map, infoWindow, html);
                }
              });
            }

        function bindInfoWindow(marker, map, infoWindow, html) {
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
          });
        }

        function downloadUrl(url, callback) {
            var request = window.ActiveXObject ?
                new ActiveXObject('Microsoft.XMLHTTP') :
                new XMLHttpRequest;

            request.onreadystatechange = function () {
                if (request.readyState == 4) {
                    request.onreadystatechange = doNothing;
                    callback(request, request.status);
                }
            };

            request.open('GET', url, true);
            request.send(null);     
        }

        function doNothing() { }


        //




        //HOT KEYS

      // 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 = [];
      }

      // Deletes all markers in the array by removing references to them
      function deleteOverlays() {
        if (markers) {
        for (i in markers) {
        markers[i].setMap(null);
      }
        markers.length = 0;
      }
}

</script>

  </head>

  <body onload="load()">    

    <div id="floating-panel">
      <input onclick="clearMarkers();" type=button value="Hide Markers">
      <input onclick="showMarkers();" type=button value="Show All Markers">
      <input onclick="deleteOverlays();" type=button value="Delete Markers">
    </div>
    <div id="map">

    </div>
  </body>

</html>

【问题讨论】：

标签： javascript php html google-maps

【解决方案1】：

您有两个名为markers 的数组，一个是downloadUrl 函数的本地XML 元素数组，另一个是您可能希望成为google.maps.Marker 对象的全局数组。给他们起不同的名字。

var gmarkers = [];

内部downloadUrl：

gmarkers.push(marker);

还有DeleteMarkers:

function DeleteMarkers() {
  //Loop through all the markers and remove
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setMap(null);
  }
  gmarkers = [];
};

proof of concept fiddle

【讨论】：

我已经改变了它们，地图现在根本没有更新：S