javascript - 谷歌地图绘制多边形并缩放到其边界

Question

我有以下问题:创建多边形后，它没有绘制在 map 上。我用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>