jquery-ui-map适合界限与折线？ [英] jquery-ui-map fit bounds with a polyline?

问题描述

我正在使用jQuery Mobile开发移动应用程序。我也是你的插件jquery-ui-map来做我的地图（它帮助很多显示问题，只用GMQ和jQM）。

我能够在地图上添加折线，它工作得很好。但是当我尝试使用fitBounds方法时，它不起作用。事实上，它缩小了很多。

这是我的代码：

  //添加了一些数据，所以你可以理解变量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（）; 
 
 //起点
 var LatLng = new google.maps.LatLng（plan [0] .lat_a，plan [0] .lng_a）; 
 bounds.extend（LatLng）; 
 
 //为（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）; 
} 
 
 //在地图
 $（'＃map_canvas'）上绘制折线。gmap（'addShape'，'Polyline'，{$ b $'path'： polylinesCoords，
'strokeColor'：'＃c00'，
'strokeThickness'：5 
}）; 
 
 //焦点»带界线的折线图
 var map = $（＃map_canvas）。gmap（get，map）; 
 map.fitBounds（bounds）; 
  

这段代码中的所有内容似乎都能正常工作，除了最后一行。

有什么想法？ 您可能错过了将地图居中的任何针脚。我得到了你的代码使用这行代码

  $（'＃map_canvas'）。gmap（'option'，'center '，（new google.maps.LatLng（plan [0] .lat_a，plan [0] .lng_a）））; 
  

I'm working on a mobile app using jQuery Mobile. I also you the plugin "jquery-ui-map" to do my map (that helped alot with display issues using only GMap with jQM).

I'm able to add polyline on the map and it works just fine. But when I try to use the fitBounds method, it doesn't work. In fact, it zoom out alot. But not on my bounds.

Here is my code :

// 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);

Everything in this snippet seems to works fine, except for the very last line.

Any ideas ?

解决方案

You might've missed to center the map to any of your pin. I got your code working with this line of code

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

这篇关于jquery-ui-map适合界限与折线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！