javascript - 将 Bootstrap 3 工具提示添加到 google maps API v3 标记

Question

我想向谷歌地图标记添加 Bootstrap 工具提示。

我无法为其添加 HTML 5 属性。所以我试图找到标记的 ID 或类，并通过 javascript 添加工具提示。但是，当我尝试使用 Chrome 工具检查标记元素时，右键单击在 map Canvas 内不起作用。

我应该如何处理它？我可以为我的谷歌地图标记分配自定义 ID 吗？？还是其他可能的方式？

我的代码:

google.maps.event.addListener(map, 'click', function (event) {
    if (POIMarker) {
        POIMarker.setMap(null);
    }
    POIMarker = new google.maps.Marker({
        position: event.latLng,
        title: 'Double-Click me to feed information about this place',
        icon: 'Images/POIMarker.png'
    });
    POIMarker.setMap(map);
    google.maps.event.clearListeners(POIMarker, 'dblclick');
    google.maps.event.addListener(POIMarker, 'dblclick', function (event) {
        $('#POIModal').modal('show');
    });
});

Answer 1

这是一种真正的黑客方法，它跟踪鼠标位置，然后在触发 google map 事件时将 Bootstrap 工具提示定位到鼠标所在的位置。您可以修改它以显示模式而不是工具提示，或者根据需要使用点击事件而不是鼠标悬停/移出。

参见 http://jsfiddle.net/6o33fx6L/

var mouse = {
    x: 0,
    y: 0
};

document.addEventListener('mousemove', function (e) {
    mouse.x = e.clientX || e.pageX;
    mouse.y = e.clientY || e.pageY
}, false);

google.maps.event.addListener(marker, 'mouseover', function (event) {

    $("#tt").css("left", mouse.x + "px").css("top", (mouse.y - 20) + "px").tooltip('show');
});

google.maps.event.addListener(marker, 'mouseout', function (event) {

    $("#tt").tooltip('hide');
});

此版本将标记的标题替换为工具提示:

http://jsfiddle.net/6o33fx6L/1/