从XML文件动态绘制坐标，仅刷新标记

Plotting coordinates dynamically from XML file and refresh Markers only

本文关键字：刷新 坐标 XML 文件 动态 绘制      更新时间：2023-09-26

我正试图用XML文件中的坐标在谷歌地图上绘制标记，下面是我的工作脚本。我的XML正在动态更新。我的目标是绘制坐标，我只刷新标记，而不是整个页面（目前我在5秒内使用自动刷新）。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>WORK</title>
<style>
html, body {
  height: 100%;
  width: 100%;
  margin: 20;
  padding: 0;
}
#map_canvas {
  height: 100%;}    
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5ATHIZrrP1XlFhEUVfCWZ2kc4oGIRbcw&sensor=false"></script>
<script type="text/javascript" src="scripts/downloadxml.js"></script>
<script> 
var infowindow;
var map;
function initialize() {
  var mapOptions = {
      zoom: 2,
      center: new google.maps.LatLng(51.5072, 0.1275),
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  downloadUrl("https://localhost/maps/data/markersfinal.xml", function(data) {
    var bounds = new google.maps.LatLngBounds();
    var markers = data.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("Latitude")),
                                          parseFloat(markers[i].getAttribute("Longitude")));
      bounds.extend(latlng);
      var marker = createMarker(markers[i].getAttribute("information"), latlng);
    }//finish loop
    map.fitBounds(bounds);
  }); //end downloadurl
}
function createMarker(information, latlng) {
   var marker = new google.maps.Marker({
                           position: latlng,
                           icon: 'https://localhost/maps/images/marker1.jpg',
                           map: map
                           });
   google.maps.event.addListener(marker, "click", function() {
     if (infowindow) infowindow.close();
     infowindow = new google.maps.InfoWindow({content: information});
     infowindow.open(map, marker);
   });
   return marker;
}
</script>
</head>
<body onload="initialize()" >
<div id="map_canvas"></div>
<!-- <meta http-equiv="refresh" content="5" > -->
</body>

这是我的下载xml.js脚本。

/**
* Returns an XMLHttp instance to use for asynchronous
* downloading. This method will never throw an exception, but will
* return NULL if the browser does not support XmlHttp for any reason.
* @return {XMLHttpRequest|Null}
*/
function createXmlHttpRequest() {
 try {
   if (typeof ActiveXObject != 'undefined') {
     return new ActiveXObject('Microsoft.XMLHTTP');
   } else if (window["XMLHttpRequest"]) {
     return new XMLHttpRequest();
   }
 } catch (e) {
   changeStatus(e);
 }
 return null;
};
/**
* This functions wraps XMLHttpRequest open/send function.
* It lets you specify a URL and will call the callback if
* it gets a status code of 200.
* @param {String} url The URL to retrieve
* @param {Function} callback The function to call once retrieved.
*/
function downloadUrl(url, callback) {
 var status = -1;
 var request = createXmlHttpRequest();
 if (!request) {
   return false;
 }
 request.onreadystatechange = function() {
   if (request.readyState == 4) {
     try {
       status = request.status;
     } catch (e) {
       // Usually indicates request timed out in FF.
     }
     if (status == 200) {
       callback(request.responseXML, request.status);
       request.onreadystatechange = function() {};
     }
   }
 }
 request.open('GET', url, true);
 try {
   request.send(null);
 } catch (e) {
   changeStatus(e);
 }
};
/**
 * Parses the given XML string and returns the parsed document in a
 * DOM data structure. This function will return an empty DOM node if
 * XML parsing is not supported in this browser.
 * @param {string} str XML string.
 * @return {Element|Document} DOM.
 */
function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }
  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }
  return createElement('div', null);
}
/**
 * Appends a JavaScript file to the page.
 * @param {string} url
 */
function downloadScript(url) {
  var script = document.createElement('script');
  script.src = url;
  document.body.appendChild(script);
}

这是我的XML

<markers>
<marker information="109.127.8.242" Longitude="49.892010" Latitude="40.377670" />
<marker information="109.169.87.141" Longitude="-0.719860" Latitude="51.522790" />
<marker information="109.229.210.250" Longitude="24.105890" Latitude="56.946000" />
<marker information="109.229.36.65" Longitude="46.172170" Latitude="48.279550" />
<marker information="109.235.59.44" Longitude="12.095560" Latitude="49.015000" />
</markers>

如果这是一种有效的刷新标记的方法，有什么建议吗？

将对downloadUrl的调用移动到自己的函数中。从initialize函数调用该函数。设置一个超时，每5秒递归调用一次函数。类似于：

var currentMarkers = [];
function initialize() {
    var mapOptions = {
        zoom: 2,
        center: new google.maps.LatLng(51.5072, 0.1275)
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    getXml();
    var interval = window.setInterval(getXml, 5000);
}
function getXml() {
    for (var i = 0; i < currentMarkers.length; i++) {
        currentMarkers[i].setMap(null);
    }
    downloadUrl("https://localhost/maps/data/markersfinal.xml", function(data) {
        var bounds = new google.maps.LatLngBounds();
        var markers = data.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("Latitude")),
                parseFloat(markers[i].getAttribute("Longitude")));
            bounds.extend(latlng);
            var marker = createMarker(markers[i].getAttribute("information"), latlng);
            currentMarkers.push(marker);
        } //finish loop
        map.fitBounds(bounds);
    }); //end downloadurl
}
相关文章：