Javascript GoogleMapsAPI：创建加载标记的函数，以便可以使用setInterval调用它来更新XML的位置_Javascript_Php_Xml_Google Maps

Javascript GoogleMapsAPI：创建加载标记的函数，以便可以使用setInterval调用它来更新XML的位置

javascript php xml google-maps

Javascript GoogleMapsAPI：创建加载标记的函数，以便可以使用setInterval调用它来更新XML的位置,javascript,php,xml,google-maps,Javascript,Php,Xml,Google Maps,我创建了一个文件，将标记加载到Google Maps JavaScript API画布中。标记是从一个XML文件生成的，该文件从SQL获取标记信息我希望能够调用函数ex.loadMarkers（），以便在SQL数据发生更改时更新标记位置现在，我可以再次调用load（），但它会刷新整个地图，而不仅仅是标记。就像一个网站的硬刷新如何包装插入标记的代码，以便将其作为函数调用 <!DOCTYPE html > <head> <meta name="

我创建了一个文件，将标记加载到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>


#地图{
身高：100%；
}
html，正文{
身高：100%；
保证金：0；
填充：0；
}
var customIcons={
用户：{
图标：'http://maps.google.com/mapfiles/kml/shapes/man.png'
},
商店：{
图标：'http://maps.google.com/mapfiles/kml/shapes/grocery.png'
}
};
函数加载（）{
var map=new google.maps.map（document.getElementById（“map”）{
中心：新google.maps.LatLng（59.914045,10.756808），
缩放：12，
mapTypeId:“路线图”，
mapTypeControl:false，
街景控制：错误，
动物控制：错误，
fullscreenControl:错误
});
//这里我需要一个函数，通过调用ex.setMarkers（）函数来推送标记，如果xml发生更改，setInterval（function（）{setMarkers（）；}，3000）可以稍后调用该函数来更新标记位置
下载URL（“xml.php”，函数（数据）{
var xml=data.responseXML；
var markers=xml.documentElement.getElementsByTagName（“标记”）；
对于（var i=0；i创建一个函数（setMarkers
），该函数执行downloadUrl调用以加载XML并在地图上创建标记

将map变量设为全局变量或将其传递给该函数
创建一个全局数组来跟踪这些标记，以便在加载新标记之前删除它们


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
}

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);