我的谷歌地图被切断了，我想知道为什么？ Javascript，V答案

【问题标题】：My google maps is cut off, I'm wondering why? Javascript, V我的谷歌地图被切断了，我想知道为什么？ Javascript，V
【发布时间】：2012-04-17 21:29:20
【问题描述】：

这有点难以解释，所以我上传了这个问题的屏幕截图：

如您所见，尽管地图上有 div 房地产（这是实际大小），但它只显示地图的 1/6！这个小部件可以调整大小，但即使它被切断。我确定我做错了什么，但无法弄清楚。这是包含地图的 div 的 CSS 代码：

#map {
border-right-color: black;
border-left-color: black;
border-right-width: 1px;
border-left-width: 1px;
position: absolute;
margin-top: 0px;
top: 38px;
left: 0px;
width: auto;
height: auto;
right: 0px;
bottom: 10px;
background-color: rgb(204, 204, 204);
border-bottom-style: solid;
border-top-style: solid;
border-bottom-width: 1px;
border-top-width: 1px;
border-bottom-color: rgb(204, 204, 204);
border-top-color: rgb(204, 204, 204);
overflow: hidden;
}

这是制作地图的 javascript：

 //google maps apis
 var marker;
 var setLocation =  new google.maps.LatLng(59.32522, 18.07002);

 var marker;

 function placeMarker(location) {
   if ( marker ) {
     marker.setPosition(location);
   } else {
     marker = new google.maps.Marker({
  position: location,
  map: map,
  draggable: true
     });
   }
 }

  function searchGoogleMaps(event) { 
var address =event.target.value;
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);

        placeMarker(results[0].geometry.location)


  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
     });
   }  


  var geocoder;
   var map;
   function initialize() {
     geocoder = new google.maps.Geocoder();
     var latlng = new google.maps.LatLng(-34.397, 150.644);
     var myOptions = {
  zoom: 2,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
   }


   function toggleBounce() {

if (marker.getAnimation() != null) {
  marker.setAnimation(null);
} else {
  marker.setAnimation(google.maps.Animation.BOUNCE);
}
   }

最后是被调用以实现这一切的 javascript 文件：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=false"></script>

在此先感谢，特别是您花时间阅读这样的长问题！

【问题讨论】：

只是在黑暗中刺痛，但您是否尝试过将 div 的宽度设置为特定的值，例如仅用于测试的 px 测量值？
嗨，doug，我现在就试一试。
试过了，还是一样。 width && height 设置为 auto 的原因是在调整大小时保持其父级的宽度和高度。谢谢！

标签： javascript css google-maps-api-3

【解决方案1】：

每当您的 'map' div 更改其大小时，您都需要在 Google 地图组件上显式触发 'resize' 事件：

当 div 改变时，开发者应该在地图上触发这个事件大小：google.maps.event.trigger(map, 'resize') .

https://developers.google.com/maps/documentation/javascript/reference#Map

【讨论】：

就像一个魅力，我希望其他人也觉得这有帮助。谢谢工程师！