在谷歌地图上使用BootStrap Popover

Question

我试图在Google地图加载时将Bootstrap Popover放置在特定的经纬度位置上。该Popover必须能够包含HTML，同时在地图加载时一起加载。

我尝试过很多方法。使用Infobox和Google自定义覆盖物来浮动一个div到地图上，这些div会出现在正确的位置，然后我可以链接到它们并将它们用作Popover的元素。但是它们不能在开始时加载。必须在控制台中启动它们，例如：

$("#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定位在某个经度/纬度上，然后使用其中的一个a元素来作为popover的位置。这一切都应该在启动时发生。

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

- Charlie Davies

---

这与Google Maps API V3无关，与http://stackoverflow.com/questions/12761131/float-a-div-over-google-maps-at-specific-lat-lng是相同的问题。 - Marcelo

抱歉你有这样的感觉，但我认为这是一个不同的问题。由于我在地图上有div，我只是试图让弹出框出现，我认为是Google地图API阻止了它。奇怪的是它在控制台中可以工作，但在加载时却不能。 - Charlie Davies

你尝试过设置选项 trigger: 'manual' 吗？ - Gady

你能提供一个示例页面或JSFiddle吗？我相信问题可能出在其他地方。 - BillPull

Answer 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")
  });
});

- Allan Wintersieck

Answer 2

我曾经遇到过类似的问题。我通过将 $(document).ready 替换为 $(window).load 来解决它。这样我们就知道在调用可能之前不存在的元素上的弹出窗口之前，Google Maps 已经加载完成了。在你的情况下：

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

- James Jones