在谷歌地图标记上初始化一个引导弹出窗口

Initialize a Bootstrap popover on a Google Maps Marker

本文关键字：一个 窗口 图标 地图 谷歌 初始化      更新时间：2023-09-26

我试图初始化一个弹出窗口点击谷歌地图标记，但Bootstrap文档只解释如何做到这一点，当你创建一个按钮在HTML上，如:

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

在我的例子中，我没有出口，因为标记是在javascript中定义的:

var marker = new google.maps.Marker({
              position: latLong,
              map: map,
              icon: 'images/icon.png'
            });
        marker.addListener('click', function() {
            //I WANT TO INITIALIZE POPOVER HERE
        });

另一种解释方式是，用jQuery这样做:

$(function () {
  $('[data-toggle="popover"]').popover()
})

但是据我所知，我的标记也没有data-toggle元素。

谁能指出我可能遗漏或做错了什么?

你应该使用谷歌地图信息窗口而不是弹出窗口，参见下面的基本示例

var infoContent = "<h1>Placeholder Information</h1>";
var infoWindow = new google.maps.InfoWindow({
    content: infoContent
});
marker.addListener('click', function () {
    infoWindow.open(map, marker);
});
相关文章：