2014-08-31 51 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