谷歌地图是灰色的 [英] Google Maps is grey

问题描述

我在使用 html 和 javascript 的移动应用程序中使用谷歌地图.当我加载地图时，我只能在左上角看到 5% 的地图.95% 的 div 容器是灰色的.当我想用 Firebug 检查 div 时，突然加载了整个地图.那可以是什么?我已经尝试了几个 Stackoverflow 线程，但没有解决方案对我有用.谢谢你.

I am using google maps in a mobile application using html and javascript. When the I load the map I am only able to see 5% of the map in the upper left corner. 95% of the div container is grey. When I want to check the div with Firebug the whole map is loaded suddenly. What can that be? I tried already several Stackoverflow threads but no solution worked for me. Thank you.

代码:

<link type="text/css" rel="stylesheet" href="jquery.mobile...>
<link type="text/css" rel="stylesheet" href="index.css">
<script type="text/javascript" src="jquery.mobile...></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile...></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js">       </script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="index.js"></script>

<div id="map" style="width: 700px; height: 700px;"></div>

var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 10,
       center: new google.maps.LatLng(-33.92, 151.25),
       mapTypeId: google.maps.MapTypeId.ROADMAP                                
});

index.js

$(document).ready(function() {
    $(window).resize(function() {
        google.maps.event.trigger(map, 'resize');
    });
});

当我使用以 % 或 em 衡量的 div 属性时，它根本不起作用.

When I use div attributes measured in % or em it doesnt work at all.

推荐答案

尝试在文档就绪时调用 resize 方法:

Try calling the resize method on document ready too:

$(document).ready(function() {
    $(window).resize(function() {
        google.maps.event.trigger(map, 'resize');
    });
    google.maps.event.trigger(map, 'resize');
});

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