如何使用 jquery-ui-map 重新居中地图答案

【问题标题】：How to re-center a map using jquery-ui-map如何使用 jquery-ui-map 重新居中地图
【发布时间】：2012-03-05 07:55:59
【问题描述】：

使用 jquery-ui-map。

我正在通过带有一些标记和纬度/经度的 JSON 加载数据地图的新中心（位置查找器应用程序）。

var origin = new google.maps.LatLng(data.origin.latitude, data.origin.longitude)

// adding the marker for the new origin works
$('#map_canvas').gmap('addMarker', {'position': origin});

// does not work
$('#map_canvas').gmap('center', '49, 7');

// does not work
$('#map_canvas').gmap('center', origin);

// does not work
$('#map_canvas').gmap('center', {'position': origin});

三个中心呼叫全部失败：

Uncaught TypeError: Cannot call method 'apply' of undefined
$.a.$.fn.(anonymous function)jquery.ui.map.js:46
b.extend.eachjquery.js:35
b.fn.b.eachjquery.js:28
$.a.$.fn.(anonymous function)jquery.ui.map.js:40
(anonymous function)@@geosearch:477
c.extend.handleSuccessjquery.js:144
c.extend.ajax.w.onreadystatechange

这里的规范方式是什么？

【问题讨论】：

标签： javascript jquery google-maps jquery-ui-map

【解决方案1】：

使用这个：

$('#map_canvas').gmap('get','map').setOptions({'center':origin});

另见此链接： http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions

【讨论】：

【解决方案2】：

有两种方式，要么获取地图，要么使用原生setter：

var map = $("#map_canvas").gmap("get", "map");
map.setCenter(origin);

或者你使用插件选项设置器

$("#map_canvas").gmap("option", "center", origin);

【讨论】：

关于访问 var map = $("#map_canvas").gmap("get", "map"); 的好处是您可以访问 Google Maps API 提供的所有方法！

【解决方案3】：

使用 panTo，您可以重新居中地图

jQuery('#map_canvas').gmap.panTo(new google.maps.LatLng('0.00','0.00'));

【讨论】：

【解决方案4】：

您必须在位置居中之前使用'option'...

...像下面的例子（我使用了按钮点击事件和其他一些选项）：

$("#button").click( function(){
var latLng = new google.maps.LatLng(data.origin.latitude, data.origin.longitude);
$('#map_canvas').gmap('option', 'center', latLng);
$('#map_canvas').gmap('option', 'zoom', 7);     
$('#map_canvas').gmap('addMarker', {position: latLng,bounds: false});   
});

希望对你有所帮助。

【讨论】：