Question

请参阅我的代码。当我单击标记时，div调整大小。我想在div调整大小后重新定位地图。但它似乎无法捕获div resize事件。（注意：div click事件可以很好地捕获。不知道为什么resize事件不起作用。）

我尝试以下方式重新定位地图。它没有用。我感谢任何帮助。

        var currCenter = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(currCenter);

这是我的代码：

<body>
<div id="map_display"></div>
<script language="JavaScript">

    var map;
    var uluru = {lat: 43.657, lng: -79.384};

    var myicon = 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png';

    function initMap() {

        map = new google.maps.Map(document.getElementById("map_display"), {
            center: uluru,
            zoom: 14,
            zoomControl: false
        });

        var marker = new google.maps.Marker({
            position: uluru,
            map: map,
            title: "bike station",
            icon: myicon
        });

        marker.addListener('click', function () {
            $("#map_display").animate({width: '75%'});
        });
    }

</script>
<script language="JavaScript" async defer
        src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxx&callback=initMap"></script>
</body>

Answer 1

在动画后触发地图上的resize事件（告诉Google Maps Javascript API地图的大小已更改。
将地图的中心设置回标记的位置。

代码段

var map;
var uluru = {
  lat: 43.657,
  lng: -79.384
};

var myicon = 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png';

function initMap() {

  map = new google.maps.Map(document.getElementById("map_display"), {
    center: uluru,
    zoom: 14,
    zoomControl: false
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: "bike station",
    icon: myicon
  });

  marker.addListener('click', function() {
    $("#map_display").animate({
      width: '75%'
    }, function() {
      google.maps.event.trigger(map, 'resize');
      map.setCenter(marker.getPosition());
    });
  });
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map_display"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

当div调整大小时，在div中重新显示Google地图

1 个答案: