从Google地图删除标记 [英] Delete Marker From Google Map

问题描述

对不起，如果这是一个非常简单的，而且我是愚蠢的，但是我已经有了一些代码，并且我正在从MYSQL中提取数据并将标记放置在地图中。我有标记位置发生变化，所以我想更新标记位置而无需重新加载页面。所有的工作，但我不能让以前的标记删除之前放置新的标记。

正如你可以看到我的代码，我试图甚至将一个按钮不是我所需要的，只是为了看看我能否实现它）清除标记，这些标记甚至不起作用。

任何帮助将不胜感激：）

以下是我的代码：

 <！DOCTYPE html> 
< head> 
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/> 
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/> 
< title> vRAF Link 16 Map< / title> 
< style> 
 / *总是显式设置地图高度来定义包含地图的div 
 *元素的大小。 * / 
 #map {
 height：100％; 
} 
 / *可选：使样本页面填满窗口。 * / 
 html，body {
 height：100％; 
保证金：0; 
 padding：0; 
} 
 
＃浮动面板{
 position：absolute; 
 top：10px;还剩
：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 / javascriptsrc =http://maps.googleapis.com/maps/api/js?sensor=false>< / script> 
< script type =text / javascript> 
 //<！[CDATA [
 var markers = []; 
 setInterval（function（）{
 DeleteMarkers（）; 
 Link16_2（）; 
}，5000）; 
 
函数DeleteMarkers（）{
 //遍历所有标记并删除
（var i = 0; i< markers.length; i ++）{
标记[i] .setMap（null）; 
} 
 
 
 markers = []; 
}; 
 
 var customIcons = {
 bar：{
 icon：'http://map.vraf.net/icon.png'
} 
 
}; 
 
 var map = null; 
 var infoWindow = null; 
函数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; 
 
 //根据您的PHP文件的名称更改此值
 Link16_2（）; 
 
 
函数Link16_2（）{
 //根据您的PHP文件的名称改变它
 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 />+名称; 
 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）; 
} 
}）; 
 
 
函数bindInfoWindow（marker，map，infoWindow，html）{
 google.maps.event.addListener（marker，'click'，function（）{
 infoWindow.setContent（html）; 
 infoWindow.open（map，marker）; 
}）; 
} 
 
函数downloadUrl（url，callback）{
 var request = window.ActiveXObject？ 
 new ActiveXObject（'Microsoft.XMLHTTP'）：
 new XMLHttpRequest; 
 
 request.onreadystatechange = function（）{
 if（request.readyState == 4）{
 request.onreadystatechange = doNothing; 
回调（request，request.status）; 
} 
}; 
 
 request.open（'GET'，url，true）; 
 request.send（null）; 
 
 
函数doNothing（）{} 
 
 
 // 
 
 
 
 
 //热键
 
 //从地图中移除标记，但将它们保留在数组中。 
函数clearMarkers（）{
 setMapOnAll（null）; 
} 
 
 //显示当前在数组中的所有标记。 
 function showMarkers（）{
 setMapOnAll（map）; 
} 
 
 //删除数组中的所有标记，删除对它们的引用。 
函数deleteMarkers（）{
 clearMarkers（）; 
 markers = []; 
 
 
 //删除数组中的所有标记删除对它们的引用
 function deleteOverlays（）{
 if（markers）{
 for我在标记）{
 markers [i] .setMap（null）; 
} 
 markers.length = 0; 
} 
} 
 
< / script> 
 
< / head> 
 
< body onload =load（）> 
 
< div id =浮动面板> 
< input onclick =clearMarkers（）; type = button value =隐藏标记> 
< input onclick =showMarkers（）; type = button value =显示所有标记> 
< input onclick =deleteOverlays（）; type = button value =删除标记> 
< / div> 
< div id =map> 
 
< / div> 
< / body> 
 
< / html> 
  

解决方案

标记，一个是 downloadUrl 函数本地的XML元素数组，以及您可能想要的全局数组 google.maps.Marker 对象。给他们不同的名字。

  var gmarkers = []; 
  

里面 downloadUrl ：

  gmarkers.push（marker）; 
  

和 DeleteMarkers ：

 函数DeleteMarkers（）{
 //遍历所有标记并删除
 for（var i = 0; i< ; gmarkers.length; i ++）{
 gmarkers [i] .setMap（null）; 
} 
 gmarkers = []; 
}; b 
 
 
 $ b 
 >概念证明小提琴 
 
Im sorry if this is a really simple one and im being dumb but I have got some code here and i'm pulling data from MYSQL and placing the markers in the map. I have the markers positions changing, so I want to update the markers positions without reloading the page. All working however I can't get the previous markers to delete before placing the new marker.

As you can see in my code I have tried to even place a button (not what I need but just to see if I can get it to work) to clear the markers and thats not even working.

Any help would be greatly appreciated :)

Here is my Code:
<!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> 

解决方案
You have two arrays called markers, one an array of XML elements that is local to the downloadUrl function and the global array of what you probably wanted to be google.maps.Marker objects.  Give them different names.
var gmarkers = [];
Inside downloadUrl:
gmarkers.push(marker);
And 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

                        
这篇关于从Google地图删除标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！