mysqldb googlemapsapi上的javascript多边形

7d7tgy0s  于 2021-06-19  发布在  Mysql
关注(0)|答案(1)|浏览(345)

我在mysql数据库中有每个顶点的lat和lon序列,多边形的每个顶点都有相同数量的基于多边形的原始fid,然后我用php解析成xml格式,现在我可以在java脚本上循环通过mysql数据,在google map上自动显示多边形。
我对java脚本代码的编写感到困惑;这就是我如何循环通过这些lat和lon,得到具有相同oriq\u 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>
lvmkulzt

lvmkulzt1#

解析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);
}

概念验证小提琴

代码段:

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>

相关问题