javascript - 如何使地图覆盖javascript中的所有标记？

Question

我在 javascript 中遇到了 Google Map 的问题，我无法使所有标记都符合界限。只有第一个标记可见。这是控制台中抛出的错误：

未捕获的异常：InvalidValueError：不是 LatLngBounds 或 LatLngBoundsLiteral：不是对象

这是我正在使用的代码：

var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: parseFloat(lat), lng:parseFloat(lng)},
    zoom: 11
});

var bounds = new google.maps.LatLngBounds();

for(var i = 0; i < coordinates.length; i++){

    var coords = {lat: parseFloat(lat), lng:parseFloat(lng)}

    var marker = new google.maps.Marker({position: coords, map: map});
    var infowindow = new google.maps.InfoWindow();

    infowindow.setContent(lat);
    infowindow.open(map, marker);

    bounds.extend(marker.position);

}

map.setCenter(bounds.getCenter());
map.fitBounds(bounds);  

我在地图上有 4 个标记，但地图被缩放并以添加的最后一个为中心，如下图所示：

如果我缩小地图，我可以看到所有其他标记，但 fitbounds 无法使所有标记都适合边界。

Answer 1

您是否从数组中获取标记的坐标？如果它们是正确的 latLng 对象，则需要检查您传递的坐标值。由于您尚未提供示例代码，因此我创建了一个工作小提琴，我在地图上使用了 fitbounds。

示例代码片段：

 var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 20,
    center: {lat: -33.9, lng: 151.2}
  });

var markerArray = [
  ['Bondi Beach', -33.890542, 151.274856],
  ['Coogee Beach', -33.923036, 151.259052],
  ['Cronulla Beach', -34.028249, 151.157507],
  ['Manly Beach', -33.80010128657071, 151.28747820854187],
  ['Maroubra Beach', -33.950198, 151.259302]
];

var bounds = new google.maps.LatLngBounds();

  for (var i = 0; i < markerArray.length; i++) {
    var marker = markerArray[i];
    var markerCoord = new google.maps.LatLng(marker[1],marker[2]);

    var marker = new google.maps.Marker({
      position: markerCoord,
      map: map
    });

     bounds.extend(markerCoord);
  }
  map.fitBounds(bounds);
}

希望这可以帮助！