Question

我在隐藏的div中有一张地图，可以通过按钮按下来显示。我最初遇到问题但是通过触发调整大小事件来修复它们。我现在的问题是地图不是以我用地图初始化地图的位置为中心。

我想将一个map.setCenter（？）调用添加到resize或bounds更改的事件侦听器中，但它们似乎永远不会被调用。我已经在每个警报中进行测试，但没有任何反应。

编辑：请求示例...

<!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Simple markers</title>
  <style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #theButton {
    position: absolute;
    top: 0;
    left: 400px;
    padding: 10px;
    background-color: orange;
    z-index: 100;
  }
  #map {
    height: 100%;
  }
</style>
</head>
<body>
  <div id="theButton" onclick="resizeMap();">Click Me</div>

  <div id="map"></div>

  <script>
  function initMap() {
    var myLatLng = {lat: 51.320151, lng: -0.555658};

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

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Test Location!'
    });

    var getCen = map.getCenter();

    var currentMapCenter = null;
    google.maps.event.addListener(map, 'resize', function () {
        currentMapCenter = map.getCenter();
        alert("Resizing");
    });

    google.maps.event.addListener(map, 'bounds_changed', function () {
        if (currentMapCenter) {
        // react here
            map.setCenter(currentMapCenter);
            alert("Centering");
        }
        currentMapCenter = null;
    });
  }

  function resizeMap() {
    alert("Clicked");
    google.maps.event.trigger(map, 'resize');
  };
  </script>

  <script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>

</body>
</html>

Answer 1

我已经对您的代码进行了更深入的测试，var map的范围存在问题以这种方式更改声明（在函数initMap本地范围之外的窗口范围内）

<script> 
var map;

     function initMap() {
        var myLatLng = {lat: 51.320151, lng: -0.555658};

        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng
        });
     ........
      ......

否则在其他函数中没有正确引用map，例如：

function resizeMap() {
google.maps.event.trigger(map, 'resize');

在此功能中，如果您没有更改var声明地图，则不会被引用，也不能触发任何内容

Google Maps Javascript - 调整未调用的事件侦听器

1 个答案: