谷歌地图刷新灰色

Question

我正在尝试将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 = {
        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');

Answer 1

要解决这个问题，您需要：

1. 确保显示地图的div具有有效大小，如果隐藏，则它将具有零大小，并且您需要在具有有效大小之前显示div。如果使用百分比调整大小，请确保其所有父元素都具有百分比大小或特定大小（请参阅Mike Williams' Google Maps API v2 tutorial on the subject for details）。

2. 一旦它的大小初始化地图（如果你还没有）

3. 如果已经初始化，则触发其上的resize事件。

4. 您可能需要在触发调整大小事件后设置地图的中心。

您没有提供足够的信息来查看您的错误。

Answer 2

在开始编码之前，您应首先使用Google Map Widget。您只需要密钥ID，纬度和经度，并使用应用程序设计器。建议的缩放设置为8，默认情况下是足够的。 以下是一些细节： http://hodentekmobile.blogspot.com/2016/07/intel-xdk-controls-6-using-google-map.html