从 MySQL 数据库在 Google Maps API v3 上绘制多个多边形

Posted 2023-02-23

【中文标题】从 MySQL 数据库在 Google Maps API v3 上绘制多个多边形

【英文标题】：Drawing Multiple Polygons on Google Maps API v3 from MySQL database

【发布时间】：2014-07-09 07:02:17

【问题描述】：

所以，我试图通过我的 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 返回奇数坐标。使用警报，我可以看到用于存储“新 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 的新手）。任何建议将不胜感激！

【参考方案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);
    

working fiddle

代码 sn-p：

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>