javascript - Twitter Bootstrap Popover 中的谷歌地图

Question

我正在使用 Twitter 的 Bootstrap，并希望在 popover 中显示 Google map .

现在它的工作方式我正在做这样的事情

$ ->
  $('.thumbnails a.js-popover').popover
    html: true,
    content: ->
      uid = $(this).data('profileUid')
      popover_container = $('.popover-contents:data(profileUid=' + uid + ')')
      _.each window.Maps, (map) ->
        google.maps.event.trigger map, 'resize' // I hoped this would re-draw the map
      popover_container.html()

popover 从隐藏的 .popover-contents div 加载它的内容，并连接到具有数据属性的 a (这样我就可以找到正确的 popover显示)

当不在弹出窗口中时， map 工作得很好，我认为它与通过 jQuery 中的 html() 复制到另一个 DOM 元素有关。 Twitter 的 Bootstrap 不提供 modal opened 回调，我真的不确定如何让 map 工作。

正如您所看到的， map 在完整的个人资料页面上可以正常工作，标记是相同的(rails 部分)，并且 javascript 也是共享的 - 我只能假设 GoogleMaps API 真的不喜欢它是 < em>dom 搞砸了，因此导致了问题。

Answer 1

如果您使用弹出窗口，最好的选择可能是使用 google's static API并避免与交互式 map 相关的麻烦。从文档中借用一个非常的简单案例，您可能会这样做:

var options = { content: '<img src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=512x512&maptype=roadmap&sensor=false">' };

$('#example').popover(options)

将其包装成一个可重用的函数会产生:

var getMap = function(opts) {
  var src = "http://maps.googleapis.com/maps/api/staticmap?",
      params = $.extend({
        center: 'New York, NY',
        zoom: 14,
        size: '512x512',
        maptype: 'roadmap',
        sensor: false
      }, opts),
      query = [];

  $.each(params, function(k, v) {
    query.push(k + '=' + encodeURIComponent(v));
  });

  src += query.join('&');
  return '<img src="' + src + '" />';
}

var content = getMap({center: 'Fritz-Walter Stadion, Kaiserslautern'});
$('#example').popover({ content: content })