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

Question

我正在使用jquery-ui-map 来创建这样的 Google 地图实例：

$('#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”代码时，控制台中出现“未捕获的 ReferenceError：未定义地图”错误。

如何正确引用“地图”？看起来我不能做var map = $('#CHMap').gmap({//options});，因为“jquery-ui-map”文档建议 gmap 什么都不返回。

Answer 1

我觉得你可以的

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

来自 OP 的注释。最新插件中正确的做法是：

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

我看不出它在哪里说它在 API 中没有返回任何内容

当您需要运行访问地图时，您可以在 google maps 事件侦听器中添加代码，该事件侦听器会一直等到像这样加载地图图块。

由于 Gmaps 是从 google 异步获取的，因此您无法始终确定它会在您调用它时出现，除非您执行此类操作。

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

所以它只会在地图完全加载后执行。

来自巴西的干杯！