时间戳

首页 > 解决方案 > Google Maps API：创建加载标记的函数，以便可以使用 setInterval 调用它来更新 XML 的位置

javascript - Google Maps API：创建加载标记的函数，以便可以使用 setInterval 调用它来更新 XML 的位置

问题描述

我创建了一个将标记加载到 Google Maps JavaScript API 画布中的文件。标记是从 XML 文件生成的，该文件从 SQL 获取标记信息。

我希望能够调用一个函数 ex。loadMarkers() 以便在 SQL 数据更改时更新标记位置。

到目前为止，我可以再次调用 load()，但它会刷新整个地图，而不仅仅是标记。就像网站的硬刷新一样..

如何包装仅插入标记的代码，以便可以将其作为函数调用？

 <!DOCTYPE html >
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

    <style>
        #map {
            height: 100%;
        }

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

    </style>

    <script type="text/javascript">

    var customIcons = {
        user: {
        icon: 'http://maps.google.com/mapfiles/kml/shapes/man.png'
        },
        store: {
        icon: 'http://maps.google.com/mapfiles/kml/shapes/grocery.png'
        }
    };


    function load() {
    var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(59.914045, 10.756808),
    zoom: 12,
    mapTypeId: 'roadmap',
    mapTypeControl: false,
    streetViewControl: false,
    zoomControl: false,
    fullscreenControl: false
    });


    // here I want a function that pushes the markers by calling ex. setMarkers() function, that can be called later by setInterval(function() {setMarkers();},3000) to update markers location if the xml is changed
    downloadUrl("xml.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 type = markers[i].getAttribute("type");
        var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")),
        parseFloat(markers[i].getAttribute("lng")));
        var html = "<b>" + name + "</b>";
        var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        draggable: false,
        animation: google.maps.Animation.DROP,
        });
        } // for each markers
    });   //download url
    } // load();

    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() {}
    **//This is the function I want to update the markers with, without having to do a hard refresh of the site.**
    setInterval(function() {setMarkers();},3000);


    </script>

    </head>

    <body onload="load()">
    <div id="map"></div>
    </body>

    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=<?php echo $api_key; ?>&callback=initMap">
    </script>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js sensor=false"></script>
    </html>

标签： javascriptphpxmlgoogle-maps

解决方案

  1. setMarkers创建一个执行 downloadUrl 调用以加载 XML 并在地图上创建标记的函数 ( )。

    • 使地图变量成为全局变量或将其传递给该函数
    • 创建一个全局数组来跟踪这些标记，以便您可以在加载新标记之前删除它们。
var gmarkers = [];
function setMarkers() {
  downloadUrl(urlString, function(data) {
    var xml = data.responseXML;
    for (var i=0; i<gmarkers.length; i++)
      gmarkers[i].setMap(null);
    gmarkers = [];
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var type = markers[i].getAttribute("type");
      var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")),
        parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + name + "</b>";
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        draggable: false,
        animation: google.maps.Animation.DROP,
      });
      gmarkers.push(marker);
    } // for each markers
  });   //download url
}
  1. 在load函数和setTimeout.
var map;
function load() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(59.914045, 10.756808),
    zoom: 12,
    mapTypeId: 'roadmap',
    mapTypeControl: false,
    streetViewControl: false,
    zoomControl: false,
    fullscreenControl: false
  });
  setMarkers();
} // load();


setInterval(function() {
  setMarkers();
},3000);

工作示例

推荐阅读