2014-08-31 89 views
0

我有一个在谷歌地图API阵列画多边形的代码,但它并没有通过这个纬度经度这里工作多边形阵列不会在谷歌地图API的工作

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script> 
    function drawPoly(multipolygonWKT) { 
     var polylines = []; 
     var toReturn = []; 

     var formattedValues = multipolygonWKT.replace("))", ""); 
     formattedValues = formattedValues.replace("((", ""); 


     var linesCoords = formattedValues.split("),("); 



     for (i = 0; i < linesCoords.length; i++) { 
      polylines[i] = []; 
      var singleLine = linesCoords[i].split(","); 

      for (j = 0; j < singleLine.length; j++) { 
       var coordinates = singleLine[j].split(" "); 
       var latlng = new google.maps.LatLng(parseFloat(coordinates[1]), parseFloat(coordinates[0])); 

       polylines[i].push(latlng); 

      } 
     } 

     //by now you should have the polylines array filled with arrays that hold the coordinates of the polylines of the multipolyline 
     //lets loop thru this array 

     for (k = 0; k < polylines.length; k++) { 
      var line = polylines[k]; 
      if (k > -1) { 
       toReturn.push(
      new google.maps.Polygon({ 
       paths: line, 
       strokeColor: 'red', 
       strokeOpacity: 1, 
       strokeWeight: 2, 
       zIndex: 1 
      }) 
     ); 
      } 
     } 
     return toReturn; 
    } 


    $(document).ready(function() { 
     var map = new google.maps.Map(document.getElementById("map"), { 
      center: new google.maps.LatLng(24.886436490787712, 70.2685546875), 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     debugger; 
     var mps = ["MULTIPOLYGON(((25 80.1,18.4 66.1,32.3 64.7,25.7 80.1)),(25.1 80.5,18.8 66.1,32.9 64.2,25.1 80.5))"]; 
     for (i in mps) { 
      var lines = drawPoly(mps[i].replace("MULTIPOLYGON", "")); 
      for (k = 0; k < lines.length; k++) { 
       lines[k].setMap(map); 
       google.maps.event.addListener(lines[k], 'mouseover', function() { 
        this.setOptions({ fillColor: "red" }); 
       }); 
       google.maps.event.addListener(lines[k], 'mouseout', function() { 
        this.setOptions({ fillColor: "white" }); 

       }); 
      } 
      lines.length = 0; 
     } 
    }); 
</script> 
     </head> 
     <body> 
      <div style="height:1000px;width:1200px;" id="map"></div> 
     </body> 
     </html> 

此代码的工作this 但不起作用我的经纬度

+0

的高铁总站在你的例子有额外的支撑,这就是为什么解析部分失败对于一些LatLngs – 2014-09-01 14:25:18

+0

这将有助于如果你比“不起作用”更具体。告诉我们出了什么问题。 – skrrgwasme 2014-09-20 01:07:09

回答

1

您在WKT表示中反转了经度和纬度。这应该是 “经度纬度”:

更改此:

var mps = ["MULTIPOLYGON(((25 80.1,18.4 66.1,32.3 64.7,25.7 80.1)),(25.1 80.5,18.8 66.1,32.9 64.2,25.1 80.5))"]; 

要:

var mps = ["MULTIPOLYGON(((80.1 25,66.1 18.4,64.7 32.3,80.1 25.7),(80.5 25.1,66.1 18.8,64.2 32.9,80.5 25.1)))"]; 

Working fiddle

+0

非常感谢 – user1670642 2014-09-02 08:42:37