2

TwitterのBootstrapを使用していて、ポップオーバーでGoogleマップを表示したいと思います。

それが今どのように機能するか私はこのようなことをしています

$ ->
  $('.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-contentsポップオーバーは、非表示になっているdivからコンテンツをロードしa、データ属性でに接続されます（表示する正しいポップオーバーを見つけることができるように）

ポップオーバーでないときは、マップは完全に機能します

html()マップはポップオーバーがない場合でも完全に機能し、jQueryを介して別のDOM要素にコピーされることに関連していると思います。Twitterのブートストラップはmodal openedコールバックを提供せず、マップを機能させる方法が本当にわかりません。

ここに画像の説明を入力してください

マップが完全なプロファイルページで正しく機能していることがわかるように、マークアップは同じであり（rails部分的）、JavaScriptも共有されています-GoogleMaps APIは、それがめちゃくちゃになるのを本当に嫌っていると思いますが、したがって、問題を引き起こしています。

4

3 に答える 3

6

ポップオーバーを使用している場合、最善の策は、Google の静的 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 に答える