在Google Maps API V3上从XML文件绘制多个多边形

Drawing multiple Polygons on Google Maps API V3 from XML File

本文关键字:绘制 文件 多边形 XML 上从 Google Maps API V3      更新时间:2023-09-26

我实际绘制了一个地图,其中包含从XML文件解析的多个标记。另外,我在地图上画了两个多边形。这些线在脚本中是硬编码的,我还想从xml文件中加载多边形线。下面是我的实际代码:

<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格式是:

<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。提前感谢!

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

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. 将删除的代码替换为我的所有代码