Google地图上的所有多边形显示为一个多边形

时间:2018-10-24 16:17:12

标签: javascript google-maps

我有这些LatLon,并且已经使用MySQL数据库中的PHP解析了它们。

如何基于lat,lon遍历这对ORIGF_ID对,以在Google地图上将其显示为多边形?

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

我有这些代码,但是显示了与1和2的ORIGF_ID相对应的2个多边形,但是它们显示为一个多边形。

使用php解析xml

var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");

基于ORIGF_ID循环的多边形代码:

  var path=[];
  var paths=[];

  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);
      // Add a listener for the click event.
      polygon.addListener('click', showArrays);
    }
  }

  infoWindow = new google.maps.InfoWindow;

});
}

使用php文件的ajax代码:

function downloadUrl(url, callback) 
{
    var request = window.ActiveXObject ?
    new ActiveXObject('Microsoft.XMLHTTP') :
    new XMLHttpRequest;
    request.onreadystatechange = function() 
    {
       if (request.readyState == 4) 
       {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
       }
    };
    request.open('GET', url, true);
    request.send(null);
}

function doNothing() {}

0 个答案:

没有答案