div div size調整後的Recenter Google map div

請參閱我的代碼。當我點擊標記時，div調整大小。我想在div被調整大小後重新映射地圖。但它看起來像div resize事件不能被捕獲。（注意：div點擊事件可以很好地捕捉到，不知道爲什麼resize事件不起作用）。div div size調整後的Recenter Google map div

我試過下面的方法去更新地圖。它沒有工作。我感謝任何幫助。

 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>

來源

2017-07-30 Zhongjie Fan

觸發resize事件地圖上的動畫後（講述了谷歌地圖的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>

來源

2017-07-31 04:32:00 geocodezip

它的工作原理。這很有幫助。我感謝您的幫助。 –

div div size調整後的Recenter Google map div

回答

相關問題