如何使用twitter bootstrap popover获取动态内容

时间:2013-03-15 16:21:29

标签: jquery google-maps twitter-bootstrap popover

我想在popover上显示谷歌地图

但是popover无法更改地图

仅在修复地图时才有效

我的代码:

$(function(){

// getmap function from http://stackoverflow.com/questions/10545768/google-map-in-twitter-bootstrap-popver
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 + '" />';
}



$('.map').click(function(){
    location = $(this).text();
    $("#map").html(getMap({center: location}));
    });


$('.map').popover({trigger:'click',placement:'left',html:true,content:function(){
    return $("#map").html();
    }});    

    });

我对此功能的问题:

$('.map').click(function(){...});

单击链接(.map),因为#map已更改,弹出窗口被破坏且不起作用

谢谢

1 个答案:

答案 0 :(得分:17)

我认为您不需要在两个单独的步骤中执行此操作(单击然后弹出),除非您没有提到的某些原因,否则您也不需要div。这对我有用:

JavaScript的:

$('.map').popover({trigger:'click',placement:'left',html:true,content:function(){
     return getMap({center: $(this).text()})
  }});    
});

然后,您可以从getMap参数中删除center: 'New York, NY',行。

HTML:

<a href="#" class="map">New York, NY</a>

如果您使用#map div来增加弹出窗口,只需改变弹出窗口的CSS,方法如下:

.popover { width: 512px; height: 512px; }

我建议使用更具体的选择器,否则会影响您网站上其他地方的弹出广告。