通过本地xml数据动态更改标记

Dynamically changing markers through local xml data

本文关键字：动态 数据 xml      更新时间：2023-09-26

我通过xml数据在google API中获取动态变化的标记，从xml中获取数据，我使用了设置的时间间隔来获取动态效果。。。

出了问题。。。。

请看下面的链接，并建议我：

jsBin链接

这是我的完整代码供您参考：

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Multiple Markers</title> 
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_JQJz_Xyi5SP2IyMTzLQPjRz4l5Bh6FA&sensor=true">
</script>
</head> 
<body>
<div id="map_canvas" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var map = null;
function createMarker(latlng, html) {
var contentString = html;
var image = new google.maps.MarkerImage('http://www.google.com/mapfiles/markerA.png',
new google.maps.Size(20, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var shadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
new google.maps.Size(37, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var marker = new google.maps.Marker({
position: latlng,
map: map,
shadow: shadow,
icon: image,
zIndex: 1
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString); 
infowindow.open(map,marker);
});
}
function initialize() {
var myOptions = {
zoom: 13,
center: new google.maps.LatLng(-18.432713,-70.317993),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
setInterval(function() { 
downloadUrl("api.xml", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var html = "<strong>Taxi Arica</strong></br><strong>Latitud:</strong> " + markers[i].getAttribute("lat") + "</br><strong>Longitud:</strong> " +  markers[i].getAttribute("lng");
var marker = createMarker(point,html);
}
});
},5000);
}
var infowindow = new google.maps.InfoWindow(
{size: new google.maps.Size(150,50)}); 
  </script>

api.xml：

<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
<CD>
    <marker>lat: "13.02378651", lng: "80.17517885"</marker>
</CD>
<CD>
    <marker>lat: "13.06907", lng: "80.22546"</marker>
</CD>
<CD>
    <marker>lat: "13.06105", lng: "80.25451"</marker>
</CD>
<CD>
    <marker>lat: "13.05616", lng: "80.24248"</marker>
</CD>
</CATALOG>

首先：谷歌标记选项不允许z-index属性。相反，它应该被称为zIndex。

请参阅文档：https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions

这应该会产生类似的结果：

var marker = new google.maps.Marker({
  position: latlng,
  map: map,
  shadow: shadow,
  icon: image,
  zIndex: 1
});

其次：您正试图访问XML中的lat和lng值，如：

var lat = parseFloat(markers[i].getAttribute("lat"));

您的XML上没有任何lat属性，如下所示：

<marker>lat: "13.02378651", lng: "80.17517885"</marker>

相反，您的XML需要看起来像这样，这样javascript才能工作：

<marker lat="13.02378651" lng="80.17517885"></marker>

您可能需要回到绘图板上，要么重写XML，要么找出一种不同的解析XML的方法。现在，您可能需要使用一个正则表达式来隔离这个字符串lat: "13.02378651", lng: "80.17517885" 的lat和lng部分

最好的方法可能是为每个lat和lng值创建新的XML节点，类似于：

<marker>
    <lat>13.02378651</lat>
    <lng>80.17517885</lng>
</marker>

或者：

<marker>
    <value name="lat">13.02378651</value>
    <value name="lng">80.17517885</value>
</marker>
相关文章：