javascript - Maps API v3 : map. setCenter 无法正常工作

Question

我有 Maps api V3 的 setCenter 问题

首先是我的代码:

function initialize() {
    var myLatlng = new google.maps.LatLng(<?= $product["latitude"] ?>,<?= $product["longitude"] ?>);
    var center = myLatlng;

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

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

    google.maps.event.addDomListener(map, 'idle', function() {
        center = map.getCenter();
    });
    google.maps.event.addDomListener(window, 'resize', function() {
        map.setCenter(center);
    });        
}


google.maps.event.addDomListener(window, 'load', initialize());

然后是我的问题:

• 当我将窗口从全屏变为更小时:它有效(事件是触发了两次，不知道为什么)
• 当我再次让我的窗口全屏显示时:它不起作用
• 当我将窗口变小或变大时:它也什么都不做

map 的其余部分工作正常，我真的不明白这一点。

Answer 1

这是不正确的:

google.maps.event.addDomListener(window, 'load', initialize());

立即运行初始化并使用其返回值作为函数在窗口加载事件运行时执行。

这也是不正确的:

google.maps.event.addDomListener(map, 'idle', function() {
    center = map.getCenter();
});

map 不是 DOM 元素，应该是 google.maps.event.addListener。

您的问题是因为本地图的 DOM 元素改变大小时您没有触发 map resize 事件。

google.maps.event.addDomListener(window, 'resize', function() {
  google.maps.event.trigger(map, 'resize');
  map.setCenter(center);
});

proof of concept fiddle

代码片段:

function initialize() {
  var myLatlng = new google.maps.LatLng(40.7127837, -74.0059413);
  var center = myLatlng;

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

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

  google.maps.event.addListener(map, 'idle', function() {
    center = map.getCenter();
  });
  google.maps.event.addDomListener(window, 'resize', function() {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(center);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

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

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