jquery-ui-map 用折线拟合边界？答案

【问题标题】：jquery-ui-map fit bounds with a polyline?jquery-ui-map 用折线拟合边界？
【发布时间】：2012-04-05 14:42:23
【问题描述】：

我正在使用 jQuery Mobile 开发移动应用程序。我还使用插件“jquery-ui-map”来制作我的地图（仅使用带有 jQM 的 GMap 有助于解决显示问题）。

我可以在地图上添加折线，而且效果很好。但是当我尝试使用 fitBounds 方法时，它不起作用。事实上，它缩小了很多。但不在我的范围内。

这是我的代码：

// Added some data, so you can understand the structure
// of variable "plan"
plan[0].lat_a = 45.4681;    plan[0].lng_a = -73.7414;
plan[0].lat_b = 45.6797;    plan[0].lng_b = -74.0386;
plan[1].lat_a = 45.6797;    plan[1].lng_a = -74.0386;
plan[1].lat_b = 48.7753;    plan[1].lng_b = -64.4786;

var polylinesCoords = new Array();
var bounds = new google.maps.LatLngBounds();

// Starting point
var LatLng = new google.maps.LatLng(plan[0].lat_a, plan[0].lng_a);
bounds.extend(LatLng);

// Building the polyline coords and bounds
for (var x=0; x<plan.length; x++) {
    polylinesCoords.push(new google.maps.LatLng(plan[x].lat_a, plan[x].lng_a), new google.maps.LatLng(plan[x].lat_b, plan[x].lng_b));
    LatLng = new google.maps.LatLng(plan[x].lat_b, plan[x].lng_b);
    bounds.extend(LatLng);
}

// Drawing polyline on map
$('#map_canvas').gmap('addShape', 'Polyline', {
    'path': polylinesCoords,
    'strokeColor': '#c00',
    'strokeThickness': 5
});

// «Focus» map on polyline with bounds
var map = $("#map_canvas").gmap("get", "map");
map.fitBounds(bounds);

除了最后一行之外，这个 sn-p 中的所有内容似乎都运行良好。

有什么想法吗？

【问题讨论】：

我查看了原版 fitBounds 并发现它强制在您的“边界”变量和地图边缘之间至少有 45 像素的填充。我不确定这个填充是什么移动设备，但这可能是它缩小的原因。
有趣，我会尝试设置更大的地图。我正处于尝试任何事情的地步。但是我的视口有 200px 的高度（而且更大）。即使我删除了 45 像素的填充，我还剩下 110 像素。当它完全缩小时，我看到的最多可能是 10 px 的宽度和高度。主要是世界地图上的一个小地方。
即使使用 450px x 450px 的地图也无法正常工作。 :(
抱歉没用。我真的不使用移动地图，只是尝试了一个建议。

标签： google-maps jquery-plugins jquery-mobile google-polyline jquery-ui-map

【解决方案1】：

您可能错过了将地图置于任何图钉的中心。我让你的代码使用这行代码

$('#map_canvas').gmap('option', 'center', (new google.maps.LatLng(plan[0].lat_a,plan[0].lng_a)));

【讨论】：