为google maps API v3标记添加一个bootstrap 3工具提示

Add a bootstrap 3 tooltip to google maps API v3 marker

本文关键字：一个 bootstrap 工具提示 添加 maps google API v3      更新时间：2023-09-26

我想添加一个引导工具提示到谷歌地图标记。

我不能给它添加HTML 5属性。所以我试图找到标识符的ID或类，并通过javascript添加工具提示。但是，当我尝试使用chrome工具检查标记元素时，右键在地图画布内不起作用。

我该怎么做呢?我可以分配一个自定义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');
    });
});

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

见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/

您可以使用这个小代码段为标记指定更多字段

marker.set("id", YOURVALUE);

我会把这段代码放在你创建标记的函数中，因为它很可能在for循环中被调用。也许你可以直接写

for(i = 0; i < markers.length; ++i)
{
    // create marker
    marker.set("id", i);
    //set marker to map
}

访问很容易，只需执行

marker.get('id');

这应该是你需要做的清楚地识别某些标记

相关文章：