3

我试图在加载时将 Bootstrap Popover 放置在谷歌地图上。

弹出框必须位于特定的纬度/经度位置并在地图加载时加载，它必须能够包含 HTML。

我已经尝试了很多东西。我尝试使用 Infobox 和 Google Custom overlay 将 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")
});

什么都没有发生。它根本行不通。

我想要做的是在 lat/lng 上放置一个 div，然后使用该 div 和其中的一个元素来用于弹出框的位置。一切都发生在开始。

有没有我没有看到的更简单的方法？

4

2 回答 2

1

我怀疑它在您的代码中不起作用，因为它在地图准备好之前触发得太早了（ready() 在 DOM 准备好时触发，不一定要等待 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 回答
0

我有一个类似的问题。我通过替换来修复$(document).ready它 $(window).load。通过这种方式，我们知道 Google Maps 在调用之前可能不存在的元素上的弹出框之前已经加载。在你的情况下：

$(window).load(
  function(){
    $("#example1").popover({ title: 'Look!  A bird image!', content: "hello"})
    $("#example1").popover('show')
    console.log("hello")
});
于 2017-05-16T11:19:15.560 回答