3

Bootstrap Popover をロード時に Google マップ上に配置しようとしています。

ポップオーバーは特定の緯度/経度の場所にある必要があり、地図が読み込まれるときに読み込む必要があります。HTML を含めることができる必要があります。

私は多くのことを試しました。Infobox と Google カスタム オーバーレイを使用して、マップ上に div を浮かせようとしました。興味深いことに、これらの div は適切な場所に表示されるため、それらにリンクして、ポップオーバーの要素として使用できます。ただし、起動時にロードされません。コンソールでそれらを開始する必要があります。

$("#example1").popover({ title: 'Look!  A bird image!', content: "hello"})

$("#example1").popover('show')

これらを手動で入力すると、機能してマップにポップアップ表示されます。それらをJavaScriptファイルに入れて、すべてがロードされた後にロードすると:

$(document).ready(
  function(){
    $("#example1").popover({ title: 'Look!  A bird image!', content: "hello"})
    $("#example1").popover('show')
    console.log("hello")
});

何も起こりません。それは単に機能しません。

私がやろうとしているのは、緯度/経度にdivを配置し、そのdivをa要素とともに使用して、ポップオーバーの場所に使用することです。すべては開始時に起こります。

私が見ていないより簡単な方法はありますか？

4

2 に答える 2

1

マップの準備が整う前に起動するのが早すぎるため、コードからは機能していないと思われます（DOMの準備ができたときにready（）が起動し、必ずしもGoogleのJavaScriptが完全に準備できるのを待つ必要はありません）。

まず、それが実際にこのテストのタイミングの問題であるかどうかを確認します。

$(document).ready(function(){
  setTimeout(function() {
    $("#example1").popover({ title: 'Look!  A bird image!', content: "hello"})
    $("#example1").popover('show')
    console.log("hello")
  }, 2000);
});

ページが読み込まれてから2秒後にポップオーバーが表示されます。

それが機能する場合は、実際の解決策としてこれを試してください。

$(document).ready(function(){
  google.maps.event.addListenerOnce(map, 'idle', function(){
    $("#example1").popover({ title: 'Look!  A bird image!', content: "hello"})
    $("#example1").popover('show')
    console.log("hello")
  });
});
于 2013-03-10T04:47:47.127 に答える