2

我正在使用 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()

弹出框从隐藏的 div 加载它的内容.popover-contents，并连接到awith data 属性（这样我就可以找到正确的弹出框来显示）

当不在弹出窗口中时，地图可以完美运行

该地图在不在弹出窗口中时可以完美运行，我认为它与通过html()jQuery 复制到另一个 DOM 元素有关。Twitter 的引导程序不提供modal opened回调，我真的不确定如何使地图工作。

在此处输入图像描述

正如您可以看到地图在完整的个人资料页面上正常工作，标记是相同的（rails 部分），并且 javascript 也是共享的 - 我只能假设 GoogleMaps API 真的不喜欢它的dom搞砸了，并因此引起问题。

4

3 回答 3

6

如果您使用弹出框，最好的办法可能是使用谷歌的静态 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)

将其包装成可重用的函数会产生：

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 })
于 2012-05-11T05:21:34.153 回答
1

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

似乎被广泛接受的是，在不可见的 DOM 元素中渲染 Google 地图会导致渲染错误，以及解决方案（摘自http://sethmatics.com/articles/classipress-hidden-map-tab-and-redraw-google -map-canvas/）看起来像这样：


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

我确实认为可能值得将 dom 元素从屏幕的左/右/底部移开很远，以避免它向用户闪烁，或者使用 Z-Indexing 执行某些操作以确保用户不会看到一个不受欢迎的弹出窗口。

然而，就我而言，rjz 建议的静态地图 API 是完美的。

于 2012-05-11T05:28:33.067 回答
0

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

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

$picker.on('shown.bs.popover', function () {
    var $container = $('.superPopover');
    new google.maps.Map($container[0]);
});
于 2015-07-31T18:13:17.967 回答