Question

我在MySQL数据库中的每个顶点都有一系列的经度和纬度，并且每个多边形的顶点基于多边形具有相同的ORIG_FID数，然后用PHP解析为XML格式，现在我如何遍历MySQL数据Java脚本可自动在Google地图上显示多边形。

我对编写Java脚本代码感到困惑；那我该如何遍历这些经纬度以获取具有相同oriq_fid的经纬度数。

 <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

解析XML

var xml = parseXml(xmlStr);

获取每个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);
}

为每个路径构建一个多边形

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

代码段：

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>

mysqldb上googlemaps api上的多边形

1 个答案: