来自mysql db的google maps api上的多边形

Question

我在 MySQL db 中的每个顶点都有一系列 lat 和 lon，多边形的每个顶点都有相同数量的基于多边形的 ORIG_FID 然后我已经用 PHP 将它们解析为 XML 格式，现在我可以如何循环遍历我的 MySQL 数据java脚本自动在谷歌地图上显示多边形。

我对编写java脚本代码感到困惑；那我如何遍历这些 lat 和 lon 以获取具有相同 oriq_fid 的 lat 和 lon 的数量。

 <markers>
<marker title="hi" ORIG_FID="1" OBJECTID="1" lat="34.5127" lng="69.3182"/>
<marker title="hi" ORIG_FID="1" OBJECTID="2" lat="34.5128" lng="69.3174"/>
<marker title="hi" ORIG_FID="1" OBJECTID="3" lat="34.5134" lng="69.3175"/>
<marker title="hi" ORIG_FID="1" OBJECTID="4" lat="34.5133" lng="69.3183"/>
<marker title="hi" ORIG_FID="1" OBJECTID="5" lat="34.5127" lng="69.3182"/>
<marker title="hi" ORIG_FID="2" OBJECTID="6" lat="34.5145" lng="69.3099"/>
<marker title="hi" ORIG_FID="2" OBJECTID="7" lat="34.5144" lng="69.3104"/>
<marker title="hi" ORIG_FID="2" OBJECTID="8" lat="34.5139" lng="69.3104"/>
<marker title="hi" ORIG_FID="2" OBJECTID="9" lat="34.514" lng="69.3099"/>
<marker title="hi" ORIG_FID="2" OBJECTID="10" lat="34.5145" lng="69.3099"/>
</markers>

Answer 1

1. 解析 XML

var xml = parseXml(xmlStr);

1. 检索每个 FID 的坐标

for (var i=0; i<markers.length; i++) {
  var lat = markers[i].getAttribute('lat');
  var lng = markers[i].getAttribute('lng');
  var pt = new google.maps.LatLng(lat, lng);
  var FID = markers[i].getAttribute('ORIG_FID');
  if (!paths[FID])
    paths[FID] = [];
  paths[FID].push(pt);
}

1. 为每条路径构建一个多边形

for (var path in paths) {
  if (paths.hasOwnProperty(path)) {
    path = paths[path];

    // Construct the polygon.
    var polygon = new google.maps.Polygon({
      paths: path,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 3,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    polygon.setMap(map);
}

proof of concept fiddle

代码 sn-p：

function parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('MicrosoftXMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }
}
var xmlStr = '<markers><marker title="hi" ORIG_FID="1" OBJECTID="1" lat="34.5127" lng="69.3182"/><marker title="hi" ORIG_FID="1" OBJECTID="2" lat="34.5128" lng="69.3174"/><marker title="hi" ORIG_FID="1" OBJECTID="3" lat="34.5134" lng="69.3175"/><marker title="hi" ORIG_FID="1" OBJECTID="4" lat="34.5133" lng="69.3183"/><marker title="hi" ORIG_FID="1" OBJECTID="5" lat="34.5127" lng="69.3182"/><marker title="hi" ORIG_FID="2" OBJECTID="6" lat="34.5145" lng="69.3099"/><marker title="hi" ORIG_FID="2" OBJECTID="7" lat="34.5144" lng="69.3104"/><marker title="hi" ORIG_FID="2" OBJECTID="8" lat="34.5139" lng="69.3104"/><marker title="hi" ORIG_FID="2" OBJECTID="9" lat="34.514" lng="69.3099"/><marker title="hi" ORIG_FID="2" OBJECTID="10" lat="34.5145" lng="69.3099"/></markers>'

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script>
  var map;
  var infoWindow;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 5,
      center: {
        lat: 24.886,
        lng: -70.268
      },
      mapTypeId: 'terrain'
    });

    // Define the LatLng coordinates for the polygon.
    var xml = parseXml(xmlStr);
    var markers = xml.getElementsByTagName('marker');
    var path = [];
    var paths = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
      var lat = markers[i].getAttribute('lat');
      var lng = markers[i].getAttribute('lng');
      var pt = new google.maps.LatLng(lat, lng);
      var FID = markers[i].getAttribute('ORIG_FID');
      if (!paths[FID])
        paths[FID] = [];
      paths[FID].push(pt);
      bounds.extend(pt);
    }
    for (var path in paths) {
      if (paths.hasOwnProperty(path)) {
        path = paths[path];

        // Construct the polygon.
        var polygon = new google.maps.Polygon({
          paths: path,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 3,
          fillColor: '#FF0000',
          fillOpacity: 0.35
        });
        polygon.setMap(map);
        // Add a listener for the click event.
        polygon.addListener('click', showArrays);
      }
    }
    map.fitBounds(bounds);



    infoWindow = new google.maps.InfoWindow;
  }

  /** @this {google.maps.Polygon} */
  function showArrays(event) {
    // Since this polygon has only one path, we can call getPath() to return the
    // MVCArray of LatLngs.
    var vertices = this.getPath();

    var contentString = '<b>Polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

    // Iterate over the vertices.
    for (var i = 0; i < vertices.getLength(); i++) {
      var xy = vertices.getAt(i);
      contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
    }

    // Replace the info window's content and position.
    infoWindow.setContent(contentString);
    infoWindow.setPosition(event.latLng);

    infoWindow.open(map);
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>