從MySQL數據庫在Google Maps API v3上繪制多個多邊形

Question

所以，我試圖通過MySQL表中的多邊形空間數據在谷歌地圖上繪制多個多邊形。 我有一個PHP腳本，根據我的表數據輸出以下XML。

<subdivision name="Auburn Hills">
    <coord lat="39.00748" lng="-92.323222"/>
    <coord lat="39.000843" lng="-92.323523"/>
    <coord lat="39.000509" lng="-92.311592"/>
    <coord lat="39.007513" lng="-92.311378"/>
    <coord lat="39.00748" lng="-92.323222"/>
</subdivision>
<subdivision name="Vanderveen">
    <coord lat="38.994206" lng="-92.350645"/>
    <coord lat="38.985033" lng="-92.351074"/>
    <coord lat="38.984699" lng="-92.343092"/>
    <coord lat="38.981163" lng="-92.342234"/>
    <coord lat="38.984663" lng="-92.3335"/>
    <coord lat="38.993472" lng="-92.333179"/>
    <coord lat="38.994206" lng="-92.350645"/>
</subdivision>

我的問題是我用來嘗試將每個形狀繪制到地圖上的javascript返回奇數坐標。 使用警報，我可以看到用於存儲“new google.maps.Polygon”坐標的數組返回每個形狀的第一個緯度和經度對，並繪制一個線段而不是完整的多邊形。 有問題的javascript如下。

function initialize() {
    var mapOptions = {
        ...
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
    var arr = new Array();
    var polygons = [];

    downloadUrl("subdivision-coordinates.php", function(data) {
        var xml = data.responseXML;
        var subdivision = xml.documentElement.getElementsByTagName("subdivision");
        for (var i = 0; i < subdivision.length; i++) {
            var coordinates = xml.documentElement.getElementsByTagName("subdivision")[i].getElementsByTagName("coord");
            arr.push( new google.maps.LatLng(
                    parseFloat(coordinates[i].getAttribute("lat")),
                    parseFloat(coordinates[i].getAttribute("lng"))
            ));

            polygons.push(new google.maps.Polygon({
                paths: arr,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            }));
            polygons[polygons.length-1].setMap(map);
        }
  });
}
function downloadUrl(url, callback) {
  ..blah..blah stuff from google
}
function doNothing() {}
google.maps.event.addDomListener(window, 'load', initialize);

這個問題似乎與我如何將數據推送到數組“arr”有關。 我已經嘗試了一些不同的處理方法，似乎沒有任何工作（我肯定是一個新手，當談到JavaScript）。 任何建議將不勝感激！

Answer 1

google.maps.Polygon路徑屬性采用google.maps.LatLngs數組的數組。 您需要將每個細分處理為自己的數組，並將其作為單獨的路徑推入一個多邊形或（如下所示）為每個細分創建一個新的多邊形。

    var subdivision = xml.getElementsByTagName("subdivision");
    for (var i = 0; i < subdivision.length; i++) {
        arr = [];
        var coordinates = xml.documentElement.getElementsByTagName("subdivision")[i].getElementsByTagName("coord");
        for (var j=0; j < coordinates.length; j++) {
          arr.push( new google.maps.LatLng(
                parseFloat(coordinates[j].getAttribute("lat")),
                parseFloat(coordinates[j].getAttribute("lng"))
          ));

          bounds.extend(arr[arr.length-1])
        }
        polygons.push(new google.maps.Polygon({
            paths: arr,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35
        }));
        polygons[polygons.length-1].setMap(map);
    }

工作小提琴

代碼段：

 function initialize() { var mapOptions = { zoom: 5, center: new google.maps.LatLng(40, -117), mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var arr = new Array(); var polygons = []; var bounds = new google.maps.LatLngBounds(); // downloadUrl("subdivision-coordinates.php", function(data) { var xml = xmlParse(xmlString); var subdivision = xml.getElementsByTagName("subdivision"); // alert(subdivision.length); for (var i = 0; i < subdivision.length; i++) { arr = []; var coordinates = xml.documentElement.getElementsByTagName("subdivision")[i].getElementsByTagName("coord"); for (var j = 0; j < coordinates.length; j++) { arr.push(new google.maps.LatLng( parseFloat(coordinates[j].getAttribute("lat")), parseFloat(coordinates[j].getAttribute("lng")) )); bounds.extend(arr[arr.length - 1]) } polygons.push(new google.maps.Polygon({ paths: arr, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35 })); polygons[polygons.length - 1].setMap(map); } // }); map.fitBounds(bounds); } var xmlString = '<subdivisions><subdivision name="Auburn Hills"><coord lat="39.00748" lng="-92.323222"/><coord lat="39.000843" lng="-92.323523"/><coord lat="39.000509" lng="-92.311592"/><coord lat="39.007513" lng="-92.311378"/><coord lat="39.00748" lng="-92.323222"/></subdivision><subdivision name="Vanderveen"><coord lat="38.994206" lng="-92.350645"/><coord lat="38.985033" lng="-92.351074"/><coord lat="38.984699" lng="-92.343092"/><coord lat="38.981163" lng="-92.342234"/><coord lat="38.984663" lng="-92.3335"/><coord lat="38.993472" lng="-92.333179"/><coord lat="38.994206" lng="-92.350645"/></subdivision><subdivisions>'; /** * Parses the given XML string and returns the parsed document in a * DOM data structure. This function will return an empty DOM node if * XML parsing is not supported in this browser. * @param {string} str XML string. * @return {Element|Document} DOM. */ function xmlParse(str) { if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') { var doc = new ActiveXObject('Microsoft.XMLDOM'); doc.loadXML(str); return doc; } if (typeof DOMParser != 'undefined') { return (new DOMParser()).parseFromString(str, 'text/xml'); } return createElement('div', null); } google.maps.event.addDomListener(window, 'load', initialize); 

 #map-canvas, body, html { height: 100%; width: 100%; } 

 <script src="http://maps.google.com/maps/api/js"></script> <div id="map-canvas"></div>