google map v3 未在 html5 中完全显示答案

【问题标题】：google map v3 is not fully displayed in html5google map v3 未在 html5 中完全显示
【发布时间】：2012-07-18 15:38:31
【问题描述】：

google map v3在html5中显示不全，phonegap.

这个地图是可拖动的，这里是 JavaScript 代码(main.js)

 var map;
 function initialize() {
 var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
 var myLatlng2 = new google.maps.LatLng(-24.363882,131.044922);

 var myOptions = {
 center: myLatlng,
 zoom:5,
 mapTypeId: google.maps.MapTypeId.ROADMAP

 };
 map = new google.maps.Map(document.getElementById("map_canvas"),
 myOptions);

 setMarker(myLatlng);
 setMarker(myLatlng2);

 }

 function setMarker(p)
 {
 marker = new google.maps.Marker({
 position: p,
 title:"Hello World 2!"
 });
 marker.setMap(map);

 }

 initialize();

这是我的 html

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <link rel="stylesheet"  href="css/jquery.mobile.css" />
 <link href="css/styles.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" charset="utf-8" src="js/cordova-1.9.0.js"></script>

 <script type="text/javascript" charset="utf-8" src="js/jquery-1.6.3.min.js"></script>
 <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.1.0.js"></script>
 <script type="text/javascript" charset="utf-8" src="js/tabs.js"></script>

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript" src="jquery.ui.map/jquery.ui.map.js"></script>
 <script type="text/javascript" src="jquery.ui.map/jquery.ui.map.services.js"></script>
 <script type="text/javascript" charset="utf-8" src="js/main.js"></script>
 </head>
 <body>
 <div id="page-id" data-role="page" >
 <div id="map-container"><div id="map_canvas" style="height:600px; width:600px;"></div>  </div>

 </div>
 </body>
 </html>

css

   #map-container {
    padding: 6px;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #ccc #999 #ccc;
    -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
    -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
    box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
    width: 600px;
  }

  #map_canvas {
    width: 600px;
    height: 400px;
  }

如果我在 firebug 中检查它会完全加载并在 div 中显示完整的地图，请建议我解决问题所在。

【问题讨论】：

标签： android html cordova google-maps-api-3

【解决方案1】：

我们遇到了同样的问题，我们通过在地图上设置“max-width: none”解决了这个问题。但我不记得为什么。 :(

【讨论】：

让我试试，但是在哪里可以在地图画布的 css 中添加最大宽度？我试过 #map_canvas { 宽度：100%;最大宽度：无；高度：100%； } 但没有任何区别
你贴的代码对map_canvas div有一个特定的高度和宽度，你上面的评论指定高度和宽度为百分比，你在做什么？您发布的图片是零大小地图 div 的典型症状，如果百分比大小未正确完成，则很容易发生这种情况。
我应该将它的高度和宽度更改为百分比吗？
我将其更改为百分比，我希望它在完整的 div 中，在特定的高度宽度或百分比中
尝试为 map-container 和 map_canvas div 指定一个明确的宽度和高度（以 px 为单位）。如果可行，您可以继续前进。

【解决方案2】：

查看您的屏幕截图，地图控件似乎占用了所需的空间，但实际的地图区域不够大。尝试将您的调用移至 initialize();以便它在页面的其余部分加载后执行并查看是否有帮助。

var map;
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myLatlng2 = new google.maps.LatLng(-24.363882,131.044922);

  var myOptions = {
    center: myLatlng,
    zoom:5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  setMarker(myLatlng);
  setMarker(myLatlng2);
}

function setMarker(p)
{
  marker = new google.maps.Marker({
    position: p,
    title:"Hello World 2!"
  });
  marker.setMap(map);
}


$(document).ready(function() {
  initialize();
});

另一种解决方案可能是调用 resize 事件并在加载所有内容后让地图控件重新测量，这是通过调用 google.maps.event.trigger(map, "resize"); 完成的（并像以前一样在 ready-function 之外调用 initialize()）。

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

【讨论】：

您是否尝试过您之前作为评论发布的代码？在看到那个之后，我稍微扩展了我的样本，但不确定差异是否会有所帮助。顺便问一下，你在什么系统上测试这个？
我正在网络浏览器和安卓模拟器中进行测试，两者看起来都一样。是的，我在我的代码中添加了你的两个解决方案
让我试试第二个选项，在准备好的文档外调用initialize()
Nooo 如果我把它放在准备好的文档之外，它甚至停止显示地图也不起作用......实际上我已经有了文档准备好的方法，所有的 js 都在那个方法里面。
我也面临同样的问题..如果你找到任何解决方案请帮助我。

【解决方案3】：

请检查以下内容：

<div id="mapa"  style="width: 350px; height: 350px"></div>

上面是要列出的地图的div。

var map = new google.maps.Map(
document.getElementById('mapa'), {
center: new google.maps.LatLng(9.295680287227711, 76.87921151518822),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

我尝试了以上所有方法都行不通，所以做了一个这样的技巧，可以得到预期的结果。我写了一个鼠标悬停函数并调用下面的代码

(1)修改

<div id="mapa" onmouseover="show_sidebar()" style="width: 350px; height: 350px"></div>

(2)

function show_sidebar(){
google.maps.event.trigger(map, 'resize');
}

【讨论】：

【解决方案4】：

我过去遇到过这个问题，并将我的解决方案发布到similar question。

以下修复它：

google.maps.event.addListenerOnce(map, 'idle', function() {
   google.maps.event.trigger(map, 'resize');
});

等待地图的空闲状态（即它自己完成加载），然后告诉它自己调整大小。

【讨论】：