我正在构建一个地图,显示来自xml源的多条折线,并且在获取元素和属性方面遇到了一些麻烦。
显示并绘制所有折线,但每个折线信息窗包含相同的属性数据(仅捕获xml文档中的最后一个元素)。
我已经尝试了多种情况来循环数据,但仍然无法让它抓住每条折线的集合。
XML文档的结构如下:
<!-- language: lang-xml -->
<markers>
<line attributeA="" attributeB="" attributeC="">
<point lat="" lng="">
<point lat="" lng="">
</line>
</markers>
令人讨厌的JS脚本:
<!-- language: javascript -->
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="downloadxml.js"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(30.695895, -97.354080);
var mapOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var infowindow = new google.maps.InfoWindow({map: map});
downloadUrl("objectdata.xml", function(data) {
var xml = xmlParse(data);
var lines = xml.documentElement.getElementsByTagName("markers");
var markers = xml.documentElement.getElementsByTagName("line");
// loop through polyline data
for (var i = 0; i < markers.length; i++) {
var path = [];
var points = markers[i].getElementsByTagName("point");
var name = markers[i].getAttribute("name");
for (var j = 0; j < points.length; j++) {
var lat = parseFloat(points[j].getAttribute("lat"));
var lng = parseFloat(points[j].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
path.push(point);
} //end od point loop
var polyline = new google.maps.Polyline({
path: path,
geodesic: true,
strokeColor: "#800080",
strokeOpacity: .80,
strokeWeight: 2
});
polyline.setMap(map);
// define infoWindow content
var toolTip = '<div class="infobox" style="width:280px;">'+
'<div id="siteNotice">'+
'</div>'+
'<h2>'+ name +'</h2>'+
'<div>'+
'<p>'+ notworking +'</p>'+
'</div>'+
'</div>';
google.maps.event.addListener(polyline, 'click', function(event) {
infowindow.setContent(toolTip);
infowindow.setPosition(event.latLng);
infowindow.open(map);
});
} //end polyline loop
}); //end download url
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
似乎我在这里错过了一些简单的东西 - 感谢帮助!