在加载主页时，我正在使用map.fitbounds以适应地图上的几个位置。这工作正常。但是，当我从假定的两个位置（起点和终点）中手动panel in the header选择一个位置时，地图上不适合并且不在焦点范围内。缩小后，我可以看到这些位置，它们似乎在边界折线内。
注意：这是第二次加载地图。第一次自动加载地图并且工作正常。
这是在点击时手动加载地图的代码。
$('#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);
});
});
}
});
缩小后它看起来像这样并注意bounds 内的位置。
然而，他们在一开始就失去了焦点。您也可以在线查看：
这里
我想知道它是否与一开始fitbounds用于显示地图有关pageinit。但同样，在手动选择一个应该没问题的位置后，我再次尝试重新绘制地图。我无法弄清楚是什么导致了这个麻烦。
更新 1：
这很可能是由于 css 的#map-canvas原因，因为当我从列表面板中删除一些项目时#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>
我正在使用默认的 jQM css，它将面板内容包装在带有 class 的 div 中ui-panel-inner。因此，如果我覆盖它的高度#mypanel .ui-panel-inner{height: 40px !important;}，它可以解决问题。
但我不认为这是一个优雅的解决方案，而是一个 hack。或者更确切地说是这样吗？我想听听一些更好的方法。