javascript - 扩展 jQuery UI Accordion 后，谷歌地图不再以其他 map 为中心

Question

我在 JavaScript Accordion UI 中有一个 Google map ，它在传递的纬度/经度中放置了一个大头针，并在该大头针上“居中”。

对于第一张 map ，它有效。当您单击其他两个中的任何一个时，它似乎将图钉(的底部)放在 map 的左上角。正如您在我的代码中所见，我已经在调用 resize。

这是一个演示问题的 fiddle :http://jsfiddle.net/myingling/1c4bjsff/2/

我确定这很简单，但我错过了什么？

Answer 1

您需要保存每个 map 的中心，然后在新的 Accordion 被激活后设置它(并且该 map 有一个大小，本地图/ Accordion 被隐藏时，它的计算大小为零，所以标记是在 div 的左上角居中)。

一个选项:

var maps = [];
jQuery("#accordion").accordion({
  change: function(event, ui) {
    for (var i = 0; i < maps.length; i++) {
      google.maps.event.trigger(maps[i], 'resize');
      maps[i].setCenter(maps[i]._center);
    } 
  } 
}).find('.map').each(function(i, o) {
  var latLong = new google.maps.LatLng(
    jQuery(this).data("lat"), jQuery(this).data("long"));

  var map = new google.maps.Map(o, {
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROAD,
    center: latLong
  });
  maps.push(map);

  var marker = new google.maps.Marker({
    position: latLong,
    map: map,
    title: jQuery(this).data('time')
  });
  google.maps.event.trigger(map, 'resize');
  map.setCenter(latLong);
  map._center = latLong;
  jQuery(o).data('map', map);
});

proof of concept fiddle