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

【问题标题】：How to make map cover all markers in javascript?如何使地图覆盖javascript中的所有标记？
【发布时间】：2020-08-10 02:51:04
【问题描述】：

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

未捕获的异常：InvalidValueError: not a LatLngBounds or LatLngBoundsLiteral: not an Object

这是我正在使用的代码：

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 无法使所有标记都适合边界。

【问题讨论】：

请提供一个 minimal reproducible example 来证明您的问题（包括任何必需的数据），最好是 StackOverflow 代码 sn-p。请注意，marker.position 不是记录属性，map.bounds 也不是（并且可能希望成为 bounds）

标签： javascript google-maps fitbounds

【解决方案1】：

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

示例代码sn-p：

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

希望这会有所帮助！

【讨论】：