-1

ユーザーが場所を選択できるように、マーカー付きの Google マップをフォームに追加しようとしていますが、どこかで問題が発生しました。

フォーム入力時のエラー

ご覧のとおり、マップはその領域で正しく表示されませんでした。マーカーをマップに配置し、そこに中心を設定しましたが、そのマーカーの位置が正しくありません。最初のマップの外側 (中心ではなく、上のマップの右上) に隠れています。

F12 ボタンを押して (firefox で) Firebug を有効にすると、マップが正しく表示されます firebugを有効にすると、マップが正しく表示されます

フォームを作成して Google マップを追加するコードは次のとおりです。

index.html ファイルのフォーム:

<div id="map_company" style="float: left; width: 500px;height: 350px;">
 <label style="margin-bottom: 5px;">Chọn vị trí hãng xe trên bản đồ:</label>
 <div id="map_canvas" style="width: 100%; height: 100%; position: relative;"></div>
</div>

そして、スクリプト ファイル内の JavaScript:

//add map to company tab
//Set Center 
var myOptions = 
{
center: new google.maps.LatLng(21.044813, 105.79864),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),
  myOptions);
var comMarker = new google.maps.Marker({
position: new google.maps.LatLng(21.044813, 105.79864),
    map: map,
draggable: true
});
google.maps.event.addListener(comMarker, 'dragend', function {
document.getElementById("cLat").value = this.getPosition().lat();
document.getElementById("cLon").value = this.getPosition().lng();
});

ここで問題を解決するのを手伝ってくれる人はいますか? Googleに説明する方法さえわかりません。

4

2 に答える 2

2

タブを使用しているようです。

はいの場合、マップのあるタブが選択されたときに、マップのサイズ変更イベントをトリガーする必要があります。

于 2013-01-21T13:52:01.450 に答える
0

map_canvas に固定サイズ (パーセンテージではなくピクセル単位) を指定し、position = relative を削除します。パーセンテージを使用する場合、親ノードにもサイズが必要です。それ以外の場合は意味がありません (100% 何ですか?)。

<div id="map_canvas" style="width: 400px; height: 300px;"></div>
于 2013-01-21T08:43:07.833 に答える