Question

我正在尝试在加载时将Bootstrap Popover放置在Google地图上。

popover必须位于特定的lat / lng位置并在加载地图时加载，它必须能够包含HTML。

我尝试过很多东西。我试图使用Infobox和Google Custom over lay在地图上浮动一个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放在lat / lng然后使用该div，其中包含一个元素用于弹出窗口的位置。一切都在开始时发生。

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

Answer 1

我怀疑它不能用你的代码工作，因为它在地图准备好之前就太快了（当DOM准备就绪时就准备好了），不一定等待谷歌的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")
  });
});

Answer 2

我有类似的问题。我通过将$(document).ready替换为$(window).load来修复它。通过这种方式，我们知道谷歌地图已经加载，然后在之前可能不存在的元素上调用弹出窗口。在你的情况下：

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

BootStrap Popover在谷歌地图上

2 个答案: