Javascript Twitter引导Popver中的谷歌地图

我正在使用Twitter的引导程序，想在一个窗口中显示一个谷歌地图

就目前的工作方式而言，我正在做类似的事情

$ ->
  $('.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）

当不在popover中时，映射可以完美地工作，我认为它与通过jQuery中的

html（）

复制到另一个DOM元素有关。Twitter的bootstrap没有提供一个

模式打开的

回调，我真的不知道如何让地图工作

---

正如您可以在完整的配置文件页面上看到的那样，地图工作正常，标记是相同的（rails部分），javascript也是共享的-我只能假设GoogleMaps API真的不喜欢它的dom被弄乱，因此会导致问题。

如果您使用的是Popover，您的最佳选择可能是使用并避免与交互式地图相关的头痛问题。借用文档中的一个非常简单的案例，您可以执行以下操作：

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)

jQuery('.tabprice ul.tabnavig li a').click(function() {
    if(jQuery(this).attr('href') == '#priceblock1') {
        //the element has to be visible on the page for google maps to render properly
        jQuery('#priceblock1').show();
        //rebuild the google map canvas to the proper size
        google.maps.event.trigger(map, 'resize'); 
        //ClassiPress javascript function to build map at address
        codeAddress(); 
    }
});

$picker.popover({
    html: true,
    content: '<div class="superPopover">'
});

$picker.on('shown.bs.popover', function () {
    var $container = $('.superPopover');
    new google.maps.Map($container[0]);
});

var选项={content:''}；
$（“#示例”）.popover（选项）

将其包装到可重用函数中可产生：

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 })

var getMap=函数（opts）{
var src=”http://maps.googleapis.com/maps/api/staticmap?",
params=$.extend({
中心：“纽约，纽约”，
缩放：14，
尺寸：'512x512'，
地图类型：“路线图”，
传感器：错误
}，选择），
查询=[]；
$.each（参数、函数（k、v）{
push（k+'='+encodeURIComponent（v））；
});
src+=query.join（'&'）；
返回“”；
}
var content=getMap（{中心：'Fritz Walter Stadion，Kaiserslautern'}）；
$（'#示例'）.popover（{content:content}）

*这里可能会找到另一个有效答案，但这不是我采用的解决方案*

人们似乎普遍认为，在不可见的DOM元素中渲染Google地图会导致渲染错误，而解决方案（抄袭自）看起来像这样：

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)

jQuery('.tabprice ul.tabnavig li a').click(function() {
    if(jQuery(this).attr('href') == '#priceblock1') {
        //the element has to be visible on the page for google maps to render properly
        jQuery('#priceblock1').show();
        //rebuild the google map canvas to the proper size
        google.maps.event.trigger(map, 'resize'); 
        //ClassiPress javascript function to build map at address
        codeAddress(); 
    }
});

$picker.popover({
    html: true,
    content: '<div class="superPopover">'
});

$picker.on('shown.bs.popover', function () {
    var $container = $('.superPopover');
    new google.maps.Map($container[0]);
});

我确实认为应该将dom元素从屏幕的左/右/底部移动很长一段距离，以避免它向用户闪烁，或者使用Z索引来确保用户不会看到不受欢迎的弹出窗口

---

然而，在我的例子中，rjz建议的静态映射API是完美的。

问题是google maps API需要容器的可见元素，因此您应该在show.bs.modal事件处理程序中调用API。大概是这样的：

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)

jQuery('.tabprice ul.tabnavig li a').click(function() {
    if(jQuery(this).attr('href') == '#priceblock1') {
        //the element has to be visible on the page for google maps to render properly
        jQuery('#priceblock1').show();
        //rebuild the google map canvas to the proper size
        google.maps.event.trigger(map, 'resize'); 
        //ClassiPress javascript function to build map at address
        codeAddress(); 
    }
});

$picker.popover({
    html: true,
    content: '<div class="superPopover">'
});

$picker.on('shown.bs.popover', function () {
    var $container = $('.superPopover');
    new google.maps.Map($container[0]);
});

$picker.popover({
是的，
内容：“”
});
$picker.on（'show.bs.popover'，函数（）{
var$container=$（'.superpover'）；
新的google.maps.Map（$container[0]）；
});

除非您在这些地图中需要交互性，否则使用静态API（）可能会省去很多痛苦和痛苦！：^）rjz感谢-在popover中，静态地图是完美的，建议你写一个简短的回答，大意是“在你的popover中使用静态地图，在其他地方使用JS地图”（你不能将焦点移动到popover，所以交互性是无用的：））哈，可以。谢谢你的建议！完美的由于无法将焦点移动到popover（当您悬停在触发它的任何位置时，popover将消失，静态贴图将是完美的），我仍然使用相同的代码在真实的配置文件页面上创建动态贴图，但这对popover更有效。@Biks，我用一些简单易用的东西把它包装起来，只是为了好玩：^）很管用，但我必须在弹出选项中添加

html:true

：