个人中心
gpt4 book ai didi

javascript - 从 Google map 中删除标记

转载 作者：太空宇宙 更新时间：2023-11-04 15:58:55 25 4
gpt4 key购买 nike

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

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

任何帮助将不胜感激:)

这是我的代码:

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

最佳答案

您有两个名为 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

关于javascript - 从 Google map 中删除标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42450099/

25 4 0
文章推荐： css - Firefox CSS 图像框
文章推荐： html - 在 Laravel 中设置数字输入的范围
文章推荐： c++ - 使用运算符 == 的结构重载
文章推荐： jquery - 将内容放在数据元素的末尾 - 如何使用数据元素进行选择
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com