13

HTMLとJavaScriptを使用してモバイルアプリケーションでGoogleマップを使用しています。マップをロードすると、マップの左上隅に 5% しか表示されません。div コンテナーの 95% は灰色です。Firebug で div を確認しようとすると、マップ全体が突然読み込まれます。それは何ですか？すでにいくつかの Stackoverflow スレッドを試しましたが、解決策はありませんでした。ありがとうございました。

コード：

<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 属性を使用すると、まったく機能しません。

4

7 に答える 7

21

center またはその他のプロパティが正しいかどうか、mapOptions を確認してください。私の場合、センター プロパティは Google マップでは解釈できませんでした。このページは css と jsp に関してはまったくエラーがありませんでしたが、常に灰色のマップしか表示されませんでした。

于 2015-06-24T14:45:28.390 に答える
20

準備が整ったドキュメントでもサイズ変更メソッドを呼び出してみてください。

$(document).ready(function() {
    $(window).resize(function() {
        google.maps.event.trigger(map, 'resize');
    });
    google.maps.event.trigger(map, 'resize');
});
于 2012-11-23T09:18:05.030 に答える
0

私の場合、電話するだけでmap.refresh()この問題が修正されました。私はGmapsを使用しています。

于 2016-10-05T18:14:32.153 に答える