在来自 XML 文件的 Google 地图 API V3 上绘制多个多边形

Question

我实际绘制了一张带有多个标记的地图，这些标记是从 XML 文件中解析出来的。另外，我在地图上画了两个多边形。坐标在脚本中是硬编码的，我也想从 XML-File 加载多边形坐标。这是我的实际代码：

<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

下面是构建经纬度对象列表并将结果保存为经纬度列表的代码。

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 muenchen + var koeln)。它将被替换为我的代码。
将我的代码的第二条语句更改为 var xmltext = data.responseText;
用我所有的代码替换删除的代码。

在来自 XML 文件的 Google 地图 API V3 上绘制多个多边形

Drawing multiple Polygons on Google Maps API V3 from XML File

javascript

xml

google-maps

polygon

google-maps-api-3