谷歌地圖繪製多邊形並縮放到其界限

Question

我有以下問題：創建多邊形後，它不繪製在地圖上。我使用this示例。第二個問題：如何在創建多邊形時縮放多邊形？

var p = { 
    "type": "MultiPolygon", 
    "coordinates": [ 
    [ 
     [ 
     [-80.661917125299155, 35.042245264120233], 
     [-80.662257428469147, 35.042566288770765], 
     [-80.662116500253873, 35.042670715828088], 
     [-80.661715367137106, 35.042389935257198], 
     [-80.661917125299155, 35.042245264120233] 
     ] 
    ], 
    [ 
     [ 
     [-80.661547137566686, 35.042510563404129], 
     [-80.661677171806787, 35.042417322902836], 
     [-80.662084018102888, 35.042702102858307], 
     [-80.662039854197829, 35.042756211162953], 
     [-80.662002555672572, 35.042820528162387], 
     [-80.661457640151127, 35.042647387136952], 
     [-80.661547137566686, 35.042510563404129] 
     ] 
    ] 
    ] 
}; 

var self = this; 
    var coords = p.coordinates; 
    var paths = []; 
    for (var i = 0; i < coords.length; i++) { 
     for (var j = 0; j < coords[i].length; j++) { 
     var path = []; 
     for (var k = 0; k < coords[i][j].length; k++) { 
      var ll = new google.maps.LatLng(coords[i][j][k] 
      [0],coords[i][j][k][1]); 
      path.push(ll); 
     } 
     paths.push(path); 
     } 
    } 
    var polygon = new google.maps.Polygon({ 
     paths: paths, 
     strokeColor: "#FF7800", 
     strokeOpacity: 1, 
     strokeWeight: 5, 
     fillColor: "#46461F", 
     fillOpacity: 0.25 
    }); 

    polygon.setMap(map); 

Answer 1

你的經度和緯度向後

 var ll = new google.maps.LatLng(coords[i][j][k] 
     [0],coords[i][j][k][1]); 

應該是：

 var ll = new google.maps.LatLng(coords[i][j][k] 
     [1],coords[i][j][k][0]); 

working example

代碼片段：

function initialize() { 
 

 
    var myLatlng = new google.maps.LatLng(52.188680, 8.608940); 
 

 
    var options = { 
 
    center: myLatlng, 
 
    zoom: 14 
 
    }; 
 

 
    var div = document.getElementById('map-canvas'); 
 
    var map = new google.maps.Map(div, options); 
 

 
    var p = { 
 
    "type": "MultiPolygon", 
 
    "coordinates": [ 
 
     [ 
 
     [ 
 
      [-80.661917125299155, 35.042245264120233], 
 
      [-80.662257428469147, 35.042566288770765], 
 
      [-80.662116500253873, 35.042670715828088], 
 
      [-80.661715367137106, 35.042389935257198], 
 
      [-80.661917125299155, 35.042245264120233] 
 
     ] 
 
     ], 
 
     [ 
 
     [ 
 
      [-80.661547137566686, 35.042510563404129], 
 
      [-80.661677171806787, 35.042417322902836], 
 
      [-80.662084018102888, 35.042702102858307], 
 
      [-80.662039854197829, 35.042756211162953], 
 
      [-80.662002555672572, 35.042820528162387], 
 
      [-80.661457640151127, 35.042647387136952], 
 
      [-80.661547137566686, 35.042510563404129] 
 
     ] 
 
     ] 
 
    ] 
 
    }; 
 

 
    var self = this; 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var coords = p.coordinates; 
 
    var paths = []; 
 
    for (var i = 0; i < coords.length; i++) { 
 
    for (var j = 0; j < coords[i].length; j++) { 
 
     var path = []; 
 
     for (var k = 0; k < coords[i][j].length; k++) { 
 
     var ll = new google.maps.LatLng(coords[i][j][k] 
 
      [1], coords[i][j][k][0]); 
 
     path.push(ll); 
 
     bounds.extend(ll); 
 
     } 
 
     paths.push(path); 
 
    } 
 
    } 
 
    var polygon = new google.maps.Polygon({ 
 
    paths: paths, 
 
    strokeColor: "#FF7800", 
 
    strokeOpacity: 1, 
 
    strokeWeight: 5, 
 
    fillColor: "#46461F", 
 
    fillOpacity: 0.25 
 
    }); 
 

 
    polygon.setMap(map); 
 
    map.fitBounds(bounds); 
 

 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize)

.kontakt_map_container { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 500px; 
 
    overflow: hidden; 
 
    margin-top: 2em; 
 
} 
 
#map-canvas { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="http://maps.google.com/maps/api/js"></script> 
 
<div class="kontakt_map_container"> 
 
    <div id="map-canvas"></div> 
 
</div>