Question

我正在使用bootstrap工具提示在鼠标悬停时显示地图标记的标题。我正在使用＆＃39; prop＆＃39;设置标题。

问题是工具提示标题属性仍然设置为鼠标悬停的第一个标记。

markers[id].addListener('mouseover', function () {
    console.log(markers[id].title);
    /* get marker pixel position */
    var proj = overlay.getProjection();
    var pos = markers[id].getPosition();
    var p = proj.fromLatLngToContainerPixel(pos);
    /* show tooltip */
    $("#tooltip").css("left", p.x + "px").css("top", (p.y + 20) + "px").prop('title', markers[id].title).tooltip('show');
});

请参阅小提琴 - http://jsfiddle.net/n8x6r5kt/1/

Answer 1

请注意，您正在做的事情存在一个基本问题，那就是您对bootstrap .tooltip()如何工作的理解。无论如何，下面是你可以做的，删除元素并重新插入，即

marker.addListener('mouseover', function () {

    var tooltip = $('#tooltip');

    /* get marker pixel position */
    var proj = overlay.getProjection();
    var pos = marker.getPosition();
    var p = proj.fromLatLngToContainerPixel(pos);

    //recreate tooltip
    tooltip.remove();
    tooltip = $(' <div id="tooltip" title="'+ marker.title+'"></div>');
    $('#map').after(tooltip);        

    //add new orientation
    tooltip.css({"left": p.x + "px", "top": (p.y + 10) + "px"});

    tooltip.tooltip();
    tooltip.tooltip('show');

});

请参阅fiddle

您可以尝试的其他选项是

为单个标记创建单独的工具提示容器，这样可以节省鼠标悬停时的额外处理
您可以简单地使用谷歌地图标记infowindow并将自己的自定义（看起来像引导工具提示）html注入其中，为什么重新发明轮子？（强烈推荐）

Jquery prop只针对第一个鼠标悬停＆＃39;事件

1 个答案: