ホームページをロードするmap.fitboundsと、地図上のいくつかの場所に収まるように使用しています。これはうまくいっています。しかし、想定される 2 つの場所 (出発地と目的地)から手動でpanel in the header場所を選択すると、地図に収まらず、焦点が合っていません。ズームアウトすると、それらの場所が表示され、境界ポリライン内にあるように見えます。
注: マップが読み込まれるのはこれが 2 回目です。初めてマップが自動的に読み込まれ、正常に動作しています。
これは、クリック時にマップを手動でロードするコードです。
$('#mylist').children().each(function(){
var anchor = $(this).find('a');
if(anchor.attr('id') != null){
anchor.click(function(){
$("#mypanel").panel("close");
var panelStation = [];
panelStation.push({"name": anchor.attr('id'), "localurl": $(this).data('localurl'),"latitude": $(this).data('latitude'), "longitude": $(this).data('longitude'),"distance": $(this).data('distance'), "duration": $(this).data('duration')});
var latlngbounds = new google.maps.LatLngBounds();
latlngbounds.extend(new google.maps.LatLng(panelStation[0].latitude, panelStation[0].longitude));
latlngbounds.extend(origin);
var mapOptions = {mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var markerOrigin = new google.maps.Marker({
position: origin,
map: map,
title: "Origin!"
});
var markerDestination = new google.maps.Marker({
position: new google.maps.LatLng(panelStation[0].latitude, panelStation[0].longitude),
map: map,
title: "Destination!"
});
map.fitBounds(latlngbounds);
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var boundingBoxPoints = [
ne, new google.maps.LatLng(ne.lat(), sw.lng()),
sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
];
var boundingBox = new google.maps.Polyline({
path: boundingBoxPoints,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
boundingBox.setMap(map);
});
});
}
});
ズームアウトすると、このようになり、境界内の場所に気付きます。
ただし、最初は焦点が合っていません。オンラインでも確認できます：
こちら
fitbounds最初に地図を表示していたのと関係があるのだろうかpageinit。しかし、もう一度、問題ないはずの場所を手動で選択した後、2 回目の試行でマップをもう一度再描画しています。何がこの問題を引き起こしているのか、私にはよくわかりません。
更新 1:#map-canvasリスト パネルからいくつかの項目を削除すると、正常に動作するため、
これはおそらく の css が原因#mypanelです。
CSS:
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas, #map-page { height: 100% }
#map-canvas {
padding: 0;
position : absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}
これがフィドルです。ただし、リソースを追加してもマップは表示されません。
更新 2:
リストパネル#mypanelにデータが入力されると、その高さが問題を引き起こしていることがわかりました。リスト内のいくつかのアイテムでは問題なく動作しますが、アイテムがそれ以上になると、ビューポートも引き伸ばされるようです。パネルdivは次のとおりです。
<div data-role="panel" id="mypanel" data-theme="a">
</div>
パネルのコンテンツを class の div にラップするデフォルトの jQM css を使用していますui-panel-inner。したがって、その高さを のようにオーバーライド#mypanel .ui-panel-inner{height: 40px !important;}すると、問題が解決します。
しかし、それはエレガントなソリューションではなく、ハックだと思います。というか、その通りですか？より良いアプローチを聞きたいです。