Javascript 从谷歌地图删除标记_Javascript_Php_Html_Google Maps

Javascript 从谷歌地图删除标记

javascript php html google-maps

Javascript 从谷歌地图删除标记,javascript,php,html,google-maps,Javascript,Php,Html,Google Maps,我很抱歉，如果这是一个非常简单的一个，我是愚蠢的，但我这里有一些代码，我从MYSQL中提取数据，并把标记放在地图上。我更改了标记位置，因此我希望在不重新加载页面的情况下更新标记位置。所有工作，但我不能得到以前的标记删除之前，放置新的标记正如你在我的代码中看到的那样，我甚至试着放置一个按钮（不是我需要的，只是看看我是否能让它工作）来清除标记，但这根本不起作用任何帮助都将不胜感激：）这是我的密码： <!DOCTYPE html > <head> <me

我很抱歉，如果这是一个非常简单的一个，我是愚蠢的，但我这里有一些代码，我从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>


vRAF链接16地图
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#浮动面板{
位置：绝对位置；
顶部：10px；
左：25%；
z指数：5；
背景色：#fff；
填充物：5px；
边框：1px实心#999；
文本对齐：居中；
字体系列：“Roboto”，“sans-serif”；
线高：30px；
左侧填充：10px；
}
//

您有两个名为

标记的数组，一个是downloadUrl
函数本地的XML元素数组，另一个是您可能希望成为google.maps.Marker
对象的全局数组。给他们起不同的名字
var gmarkers = [];

内部下载URL
：
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 = [];
};

函数deleteMarkets（）{
//循环通过所有标记并移除
对于（变量i=0；i

我已将其更改为位，地图现在根本不更新：S