谷歌地图清爽灰色 [英] google maps refreshing grey

问题描述

我正在尝试将 Google 地图添加到 jquery.mobile 站点 javascript 和 Google Maps API.问题是每次我加载地图时，大部分地图都是灰色的.我已经做了一些研究，显然我必须添加命令:

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

但是过去几个小时我一直在摆弄这个，我似乎无法让它发挥作用.这是我正在使用的代码:

<前>var myLatlng = new google.maps.LatLng(34.310774,66.225586);var mapOptions = {中心:myLatlng，mapTypeId: google.maps.MapTypeId.ROADMAP}var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);//边界var SouthWest = new google.maps.LatLng(31.207164,61.347656);var NorthEast = 新 google.maps.LatLng(37.617713,69.785156);var bounds = new google.maps.LatLngBounds(southWest,northEast);map.fitBounds(bounds);google.maps.event.trigger(map, 'resize');

解决方案

要解决该问题，您需要:

1. 确保显示地图的 div 具有有效的大小，如果它被隐藏，则它的大小将为零，并且您需要先显示该 div，然后它才会具有有效的大小.如果使用百分比来调整大小，请确保其所有父元素都具有百分比大小或特定大小(请参阅 迈克威廉姆斯关于该主题的 Google Maps API v2 教程以了解详细信息).

2. 一旦它有一个大小初始化地图(如果你还没有)

3. 如果它已经被初始化，触发它的resize事件.

4. 您可能需要在触发 resize 事件后设置地图的中心.

您没有提供足够的信息来查看哪里出错了.

I'm trying to add a Google Map to a jquery.mobile site javascript and the Google Maps API. The problem is that every time I load the map, most of the map is greyed out. I've done some research and apparently I must add the command:

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

But I've been fiddling with this for the last few hours and I can't seem to make it work. This is the code I'm using:

      var myLatlng = new google.maps.LatLng(34.310774,66.225586);

      var mapOptions = {
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

      // boundry
      var southWest = new google.maps.LatLng(31.207164,61.347656);
      var northEast = new google.maps.LatLng(37.617713,69.785156);
      var bounds = new google.maps.LatLngBounds(southWest,northEast);


      map.fitBounds(bounds);
      google.maps.event.trigger(map, 'resize');

解决方案

To solve that problem you need to:

1. make sure the div where the map is displayed has a valid size, if it is hidden, it will have zero size and you will need to display the div before it will have a valid size. If it is sized using percentages, make sure that all of its parent elements either have a percent size or a specific size (see Mike Williams' Google Maps API v2 tutorial on the subject for details).

2. once it has a size initialize the map (if you haven't already)

3. if it was already initialized, trigger the resize event on it.

4. You may need to set the center of the map after triggering the resize event.

You haven't provided enough information to see where you are going wrong.

这篇关于谷歌地图清爽灰色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！