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

然后我的问题：

当我将窗口从全屏变为较小时：它起作用（事件是触发两次，不知道为什么）
当我再次将窗口设为全屏时：它不起作用
当我把窗户缩小或放大时：它什么都不做

地图的其余部分效果很好，我真的不明白这一点。

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>

Maps API v3：map.setCenter无法正常工作

1 个答案: