2

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

最後の行を除いて、このスニペットのすべてが正常に機能しているようです。

何か案は ？

4

1 に答える 1

0

マップをピンの中央に配置するのを忘れた可能性があります。このコード行であなたのコードが動作するようになりました

$('#map_canvas').gmap('option', 'center', (new google.maps.LatLng(plan[0].lat_a,plan[0].lng_a)));
于 2014-03-19T08:04:10.280 に答える