我实际绘制了一个带有多个标记的地图，这些标记是从XML文件中解析出来的。我在地图上画了两个Polyglons。 Coords在脚本中是硬编码的，我也希望从XML-File加载polyglon coords。这是我的实际代码：
<script type="text/javascript">
var customIcons = {
warning: {
icon: 'https://scoo.me/img/marker_warning.png'
},
activate: {
icon: 'https://scoo.me/img/marker_activate.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
scrollwheel: false,
mapTypeId: 'roadmap',
mapTypeControl: false
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("../xml/vehicles_service_required.php", function(data) {';
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var VehicleID = markers[i].getAttribute("VehicleID");
var VehicleLabel = markers[i].getAttribute("VehicleLabel");
var ServiceRequired = markers[i].getAttribute("ServiceRequired");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
bounds.extend(point);
var html = "<b>Roller-Nr. " + VehicleLabel + "</b> <br/>(ID-" + VehicleID + ")";
var icon = 'https://scoo.me/img/marker_activate.png';
//var icon = {};
if (ServiceRequired == "0") {
icon = 'https://scoo.me/img/marker_warning.png';
} else if (ServiceRequired == "-1") {
icon = 'https://scoo.me/img/marker_activate.png';
}
var marker = new google.maps.Marker({
map: map,
position: point,
//icon: 'https://scoo.me/img/marker_warning.png'
icon: icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
map.fitBounds(bounds);
// Polyglon Munich
var muenchen = new google.maps.Polygon({
paths: [
new google.maps.LatLng(48.163108,11.588816),
new google.maps.LatLng(48.169462,11.595339),
new google.maps.LatLng(48.173069,11.599073),
new google.maps.LatLng(48.176016,11.592807),
new google.maps.LatLng(48.182455,11.599373)],
strokeColor: '#21a9e1',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#21a9e1',
fillOpacity: 0.2,
map: map
});
// Geschäftsgebiet Cologne
var koeln = new google.maps.Polygon({
paths: [
new google.maps.LatLng(50.9558045,6.9741296),
new google.maps.LatLng(50.9567777,6.9755029),
new google.maps.LatLng(50.9579266,6.9736361),
new google.maps.LatLng(50.9574265,6.9724559),
new google.maps.LatLng(50.9596701,6.9679069),
new google.maps.LatLng(50.9600215,6.9656538)],
strokeColor: '#21a9e1',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#21a9e1',
fillOpacity: 0.2,
map: map
});
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
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() {}
</script>
我对Polgon的XML看起来像：
<subdivisions>
<subdivision Name="Muenchen">
<coord lat="48.163108" lng="11.588816"/>
<coord lat="48.169462" lng="11.595339"/>
<coord lat="48.173069" lng="11.599073"/>
<coord lat="48.176016" lng="11.592807"/>
<coord lat="48.182455" lng="11.599373"/>
</subdivision>
<subdivision Name="Koeln">
<coord lat="50.9558045" lng="6.9741296"/>
<coord lat="50.9567777" lng="6.9755029"/>
<coord lat="50.9579266" lng="6.9736361"/>
<coord lat="50.9574265" lng="6.9724559"/>
<coord lat="50.9596701" lng="6.9679069"/>
<coord lat="50.9600215" lng="6.9656538"/>
<coord lat="50.9627245" lng="6.9615983"/>
<coord lat="50.9651706" lng="6.9538736"/>
<coord lat="50.9664139" lng="6.9517493"/>
</subdivision>
</subdivisions>
有人可以给我一个例子，说明如何在我的脚本中实现polyglone的XML。提前谢谢！
答案 0 :(得分：0)
以下是构建lat-lng对象列表的代码，并将结果保存为latlnglists。
var DOMParser = new DOMParser();
var xmltext = `
<subdivisions>
<subdivision Name="Muenchen">
<coord lat="48.163108" lng="11.588816"/>
<coord lat="48.169462" lng="11.595339"/>
<coord lat="48.173069" lng="11.599073"/>
<coord lat="48.176016" lng="11.592807"/>
<coord lat="48.182455" lng="11.599373"/>
</subdivision>
<subdivision Name="Koeln">
<coord lat="50.9558045" lng="6.9741296"/>
<coord lat="50.9567777" lng="6.9755029"/>
<coord lat="50.9579266" lng="6.9736361"/>
<coord lat="50.9574265" lng="6.9724559"/>
<coord lat="50.9596701" lng="6.9679069"/>
<coord lat="50.9600215" lng="6.9656538"/>
<coord lat="50.9627245" lng="6.9615983"/>
<coord lat="50.9651706" lng="6.9538736"/>
<coord lat="50.9664139" lng="6.9517493"/>
</subdivision>
</subdivisions>`;
var doc = DOMParser.parseFromString( xmltext, "application/xml" );
var docElem = doc.documentElement;
var subdiv = docElem.getElementsByTagName('subdivision');
var latlnglists = []; //for lists of lat-lng objs
for (var i = 0; i < subdiv.length; i++) {
var name = subdiv[i].getAttribute("Name");
//console.log(name);
var coord = subdiv[i].getElementsByTagName('coord');
var latlngs = [];
for (var k = 0; k < coord.length; k++) {
var lat = coord[k].getAttribute("lat");
var lng = coord[k].getAttribute("lng");
//console.log("lat, lng: " + lat + ", " + lng);
latlngs.push({lat: lat, lng: lng});
}
latlnglists.push(latlngs);
}
这部分使用latlnglists [i]，其中i =（0,1），作为构建多边形的路径值。
var muenchen = new google.maps.Polygon({
paths: latlnglists[0],
strokeColor: '#21a9e1',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#21a9e1',
fillOpacity: 0.2,
map: map
});
var koeln = new google.maps.Polygon({
paths: latlnglists[1],
strokeColor: '#21a9e1',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#21a9e1',
fillOpacity: 0.2,
map: map
});
修改
要使我的代码适应您的代码，请按以下步骤操作：
var xmltext = data.responseText;