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

Question

我實際上繪制了一個具有多個標記的地圖，這些標記是從XML文件解析的。 另外，我在地圖上繪制了兩個多邊形。 Coords在腳本中進行了硬編碼，我也想從XML文件中加載polyglon坐標。 這是我的實際代碼：

<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。 先感謝您！

Answer 1

這是構建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
});

編輯

要將我的代碼改編成您的代碼，請按照下列步驟操作：

1. 刪除兩個多邊形的代碼（var muenchen + var koeln）。 它將替換為我的代碼。
2. 將代碼的第二條語句更改為var xmltext = data.responseText;
3. 用我所有的代碼替換刪除的代碼。