0

我知道，这个问题已经被问过很多次，我尝试了所有可能的解决方案，包括：

google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );

，但没有一个适合我。

因此，我需要加载带有隐藏地图的页面，并且仅在用户单击“显示地图”链接时才显示地图。问题是地图没有全尺寸显示。它以 181x186 像素大小出现，但其余部分只是一个灰色方块。

This is my script: 

<script type="text/javascript"> 
function toggle() {
var ele = document.getElementById("map_canvas");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show map";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide map";
}
} 
</script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=handleApiReady"></script>
<script type="text/javascript">
function handleApiReady() {
var myLatlng = new google.maps.LatLng(<?php echo $latitude;?>, <?php echo $longitude;?>);
var myOptions = {
zoom: 9,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $latitude;?>, <?php echo $longitude;?>),
draggable: true,
icon: 'http://google-maps-icons.googlecode.com/files/factory.png', 
map: map
});

google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("latitude").value = this.getPosition().lat();
document.getElementById("longitude").value = this.getPosition().lng();
});
}
</script>

<div id="map_canvas" style="display:none;width:760px;height:420px;"></div>
4

1 回答 1

4

这对我有用：

<script type="text/javascript"> 
function toggle() {
  var ele = document.getElementById("map_canvas");
  var text = document.getElementById("displayText");
  if(ele.style.display == "block") {
    ele.style.display = "none";
    text.innerHTML = "Show map";
  }
  else {
    ele.style.display = "block";
    text.innerHTML = "Hide map";
    google.maps.event.trigger(map, "resize");
    map.setCenter(myLatlng);
  }
} 
</script>

如果我将 myLatlng 和 map 设为全局。

工作示例

于 2013-01-05T15:37:48.137 回答