Dessin de plusieurs polygones sur Google Maps API V3 à partir du fichier XML

Question

Je dessine réellement une carte avec plusieurs marqueurs qui sont analysés à partir d'un fichier XML. Addionally je dessine deux Polyglons sur ma carte. Les Coords sont codés en dur dans le script et je veux aussi charger les coords en polyglon à partir d'un fichier XML. Voici mon code actuel:

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

Et mon XML pour Polgon est à la recherche comme:

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

Quelqu'un peut-il s'il vous plaît me donner un exemple comment mettre en œuvre le XML pour polyglone dans mon script. Merci d'avance!

Answer 1

Voici le code qui construit des listes d'objets lat-lng, et enregistre le résultat en tant que 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); 
} 

Cette partie utilise latlnglists [i], où i = (0,1), en tant que valeur de chemins pour construire des polygones.

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 
}); 

EDIT

Pour adapter mon code dans le vôtre, procédez comme suit:

1. Supprimer le code pour les deux polygones (var muenchen + var Koeln). Il sera remplacé par mon code.
2. Modifier la 2ème instruction de mon code à var xmltext = data.responseText;
3. Remplacer le code supprimé avec tout mon code.