5

ポップオーバーでグーグルマップを見せたい

しかし、ポップオーバーはマップを変更できません

マップが修正された場合にのみ機能します

私のコード：

$(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）をクリックすると、ポップオーバーが壊れて機能しなくなります

ありがとうございました

4

1 に答える 1

17

2つの別々のステップ（クリックしてからポップオーバー）でそれを行う必要はないと思います。また、言及していない理由がない限り、divは必要ありません。これは私のために働きます：

JavaScript：

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

center: 'New York, NY',次に、getMapパラメータからその行を削除できます。

HTML：

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

#map divを使用してポップオーバーを大きくする場合は、代わりに次のようにしてポップオーバーのCSSを変更します。

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

ただし、より具体的なセレクターを使用することをお勧めします。そうしないと、サイトの他の場所のポップオーバーに影響します。

于 2013-03-15T20:29:21.680 に答える