從XML文件在Google Maps API V3上繪製多個多邊形

Question

我實際繪製了具有從XML文件中解析出的多個標記的地圖。附加地，我在地圖上繪製了兩個Polyglons。 Coords在腳本中是硬編碼的，我也想從XML文件中加載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> 

我的XML爲Polgon正在尋找這樣的：

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

可有人請給我一個例子，如何實現XML在我的腳本polyglone。先謝謝你！

Answer 1

這是建立經緯度對象列表的代碼，並保存結果作爲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 
}); 

編輯

適應我的代碼到你，請按照下列步驟操作：

1. 爲刪除代碼都多邊形（VAR慕尼黑+ VAR科隆）。它將被我的代碼替換。
2. 將我的代碼的第二個語句更改爲var xmltext = data.responseText;
3. 用我的所有代碼替換已刪除的代碼。