Question

通过xml数据动态更改谷歌API中的标记，从xml获取数据，我已经使用设置的时间间隔来获得动态效果......

出了问题......

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

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

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

Answer 1

首先：Google标记选项不允许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。现在你可能需要使用正则表达式来隔离这个字符串的纬度和lng部分lat: "13.02378651", lng: "80.17517885"

最好的方法可能是为每个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>

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

1 个答案: