Question

我在地图上显示多个标记。位置列表使用PHP构建：

$myData .= '["'.$Name.'", '.$lat.', '.$blon.'],';

然后我用JS在地图上绘制标记。

function initMap() {
      var map = new google.maps.Map(document.getElementById("map"), {
        zoom: 12,
        center: {lat: 32.99999999, lng: -95.2222328}
      });                        
      setMarkers(map);
}

var stores = ['.$myData.'];

function setMarkers(map) {

    for (var i = 0; i < stores.length; i++) {
        var store = stores[i];
        var marker = new google.maps.Marker({
            position: {lat: store[1], lng: store[2]},
            map: map,          
            title: restaurant[0]
        });                        
    }

}

我需要在地图加载上重新定位地图。我应该尝试从$ myData数组中平均lat / lon coords并替换initMap中的 center coords，还是有更好的方法？

Answer 1

在这个故事中：最好从后端获取平均纬度/经度坐标（或在前端计算，但在初始化GoogleMap之前），这样您的地图就会被加载到正确的位置，不会“颤抖”。

但是你仍然可能有缩放问题，并且有一些解决方案。最困难的是再次计算，但也许你可以尝试一些它（它可能会对页面加载产生有趣的影响）：

甲。放大空间。设置最小缩放并在google.API计算边界框后 - 放大！
B中。在地图上显示预加载器屏幕。在这种情况下，您也可以使用google.API计算平均纬度/经度。这是最简单的方法，但不是那么顺畅和酷。

Answer 2

这是我在jQuery中如何做到这一点（我的代码的一小部分），只需将你的地图传递给函数：

function (mapInfo) {
var noMarkers = false;

if (!mapInfo.markers || mapInfo.markers.length === 0) {
    noMarkers = true;

    var marker = new google.maps.Marker({
        position: { lat: YOUR_DESIRED_HOME_POINT, lng: YOUR_DESIRED_HOME_POINT },
        optimized: false
    });

    mapInfo.markers.push(marker);
}

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

    // Create bounds from markers
    $.each(mapInfo.markers, function (index, item) {
        var latlng = mapInfo.markers[index].getPosition();
        bounds.extend(latlng);
    });

    // Google wants to zoom ALL the way in for only one marker, so if there is only one, we'll back it out a bit
    if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
        var adjustBy = noMarkers ? 20.5 : 0.005;

        var extendNortheast = new google.maps.LatLng(bounds.getNorthEast().lat() + adjustBy, bounds.getNorthEast().lng() + adjustBy);
        var extendSouthwest = new google.maps.LatLng(bounds.getNorthEast().lat() - adjustBy, bounds.getNorthEast().lng() - adjustBy);

        bounds.extend(extendNortheast);
        bounds.extend(extendSouthwest);
    }

    google.maps.event.addListenerOnce(mapInfo.map, 'bounds_changed', function () {
        var zoom = mapInfo.map.getZoom();

        if (zoom > 18) {
            mapInfo.map.setZoom(16);
        }
    });

    mapInfo.map.fitBounds(bounds);
}

Answer 3

创建一个空的边界对象（google.maps.LatLngBounds）
将所有标记添加到其中
使用它来居中和缩放地图

function setMarkers(map) {
  var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < stores.length; i++) {
        var store = stores[i];
        var marker = new google.maps.Marker({
            position: {lat: store[1], lng: store[2]},
            map: map,          
            title: restaurant[0]
        });                        
        bounds.extend(marker.getPosition());
    }  
    map.fitBounds(bounds);
}

代码段

＆＃13;

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: {
      lat: 32.99999999,
      lng: -95.2222328
    }
  });
  setMarkers(map);
}

var stores = [
  ["store 1", 42, -72],
  ["store 2", 41, -74]
];

function setMarkers(map) {
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < stores.length; i++) {
    var store = stores[i];
    var marker = new google.maps.Marker({
      position: {
        lat: store[1],
        lng: store[2]
      },
      map: map,
      title: store[0]
    });
    bounds.extend(marker.getPosition());
  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initMap);

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

＆＃13;

具有多个标记的Recenter地图

3 个答案: