Google地圖繪制多邊形並縮放到其邊界

Question

我有以下問題：創建多邊形后，它沒有在地圖上繪制。 我用這個例子。 第二個問題：創建多邊形后如何縮放？

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]);

工作實例

代碼段：

 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>