使用InfoBox时如何定位jquery-ui-map生成的地图

时间:2012-10-02 18:44:11

标签: jquery google-maps-api-3 jquery-ui-map infobox

我正在使用jquery-ui-map创建一个像这样的Google Maps实例:

$('#CHMap').gmap({
  mapTypeControl : false
}).bind('init', function(evt, map) {
  log("Map initilised");
});

然后在脚本的其他地方,我正在使用InfoBox添加一些样式信息框,其中填充了从地理定位服务中撤回的数据,如下所示:

var boxText = document.createElement("div");
var ib = new InfoBox(myOptions); //myOptions can be ignored for this example

$.each(data, function(name, value) {
  $('#CHMap').gmap('addMarker', {
    id:value['YourId'],
    'position': value['Latitude']+','+value['Longitude'],
    'bounds': true,
    'icon': '/img/gicon.png'
  }).click(function() {
    boxText.innerHTML = "hello";
    ib.setContent(boxText);
    ib.open(map, this);
  });
});

'data'是从Geolocation服务返回的对象。如果我在首次创建gmap时将上面的'addMarker'代码放在绑定的'init'函数中,则infoBox显示正常。当我在其他地方使用'addMarker'代码时,我在控制台中收到“Uncaught ReferenceError:map not defined”错误。

如何正确引用“地图”?看起来我无法做var map = $('#CHMap').gmap({//options});,因为'jquery-ui-map'文档建议gmap不返回任何内容。

1 个答案:

答案 0 :(得分:0)

我认为你可以做到

var map = $('#CHMap').gmap();

OP的注释。最新插件中的正确方法是:

var map = $('#CHMap').gmap('get', 'map');

我没有看到它在API中返回任何内容

当您需要运行访问地图时,您可以在谷歌地图事件监听器中添加代码,等待地图图块像这样加载。

当Gmaps从谷歌获取异步时,除非你做这样的事情,否则你不能总是确定它会在那里调用它。

google.maps.event.addListener(YOUR_GOOGLE_MAPS_INSTACE, 'tilesloaded', function() {
       // put your initialization code in here.
}

因此它只会在地图完全加载后执行。

来自巴西的欢呼!