Javascript 在自定义标记悬停时显示工具提示

我有以下谷歌地图测试：

正如你所见，它得到了你的位置，然后用三个标记在地图上显示出来

我想做的是，当用户将鼠标悬停在三个标记中的任何一个上时，我想在标记头像旁边显示以下工具提示：

var tooltipOptions={
    marker:marker,
    content: "You're here!",
    cssClass:'tooltip'
};
var tooltip = new Tooltip(tooltipOptions);

我不确定如何最好地做到这一点，因为我需要这一点来为所有三个标记工作，并且无论哪个标记悬停在同一位置它应该总是出现在头像旁边，如下面的foursquare屏幕截图所示，但应该根据图标在屏幕上的位置向左或向右移动，以使其适合。

---

有人能帮忙吗？因为这些文件对我来说有点模糊。。。我可以创建工具提示，但我不知道如何最好地为所有三个标记显示工具提示，但显示位置和视口感知相同。

您可以使用鼠标悬停事件显示工具提示。（见活动文件）。您只需要为marker2显示它，因为它具有最高的zIndex值

google.maps.event.addListener(marker2, 'mouseout', function() {
});

使用显示工具提示的JSFIDLE。示例中没有工具提示代码。您可以使用您创建的工具提示更新您的示例吗？

给您：

可通过CSS定制

更新

注释代码：

更新2

删除不必要的位：

//========================
//工具提示类定义
//扩展覆盖视图：
//   https://developers.google.com/maps/documentation/javascript/reference#OverlayView
//========================
变量工具提示
工具提示=功能（提示）{
this.tip=tip；
这个.buildDOM（）；
};
$.extend（Tooltip.prototype、google.maps.OverlayView.prototype、{
//构建DOM
buildDOM:function（）{
//身体科
this.bdiv=$（“”）.addClass（'WindowBody'）.html（this.tip）；
//窗口分区
this.wdiv=$（“”）.addClass（'Window'）.append（this.bdiv）；
//暗影师
this.sdiv=$（“”）.addClass（'WindowShadow'）；
//开始关闭
这个。关闭（）；
},
//API-onAdd
onAdd:function（）{
$（this.getPanes（）.floatPane）.append（this.wdiv）；
$（this.getPanes（）.floatShadow）.append（this.sdiv）；
},
//API-onRemove
onRemove:function（）{
this.wdiv.detach（）；
this.sdiv.detach（）；
},
//API-绘图
绘图：函数（）{
变量位置，左侧，顶部；
//投影是否可访问？
如果（！this.getProjection（））返回；
//位置是否可以访问？
如果（！this.get（'position'））返回；
//转换投影
pos=this.getProjection（）.fromLatLngToDivPixel（this.get（'position'）；
//顶偏移
top=pos.y-此.getAnchorHeight（）/2；
//左偏移
if（this.getMap（）.getCenter（）.lng（）>this.get（'position'）.lng（））{
左=位置x+此.wdiv.width（）*0.5；
}否则{
左=位置x-此.wdiv.width（）*1.5；
}
//窗口位置
this.wdiv.css（'top'，top）；
this.wdiv.css（'left'，left）；
//阴影位置
this.sdiv.css（'top'，（top-this.getAnchorHeight（）/2））；
this.sdiv.css（'left'，left）；
//阴影大小
this.sdiv.width（this.wdiv.width（））；
this.sdiv.height（this.wdiv.height（））；
},
//打开工具提示
打开：功能（地图、锚定）{
//绑定到地图
如果（映射）此.setMap（映射）；
//锚固
如果（锚定）{
本系列（“锚”，锚）；
这是bindTo（主播点），主播；
本节中的“定位”、“锚定”；
}
//需要强制重画，否则它会在我们显示工具提示后决定绘制
这个.draw（）；
//显示工具提示
this.wdiv.show（）；
this.sdiv.show（）；
//集合属性
this.isOpen=真；
},
//关闭工具提示
关闭：函数（）{
//隐藏工具提示
this.wdiv.hide（）；
this.sdiv.hide（）；
//集合属性
this.isOpen=false；
},
//正确获取锚点高度
getAnchorHeight:函数（）{
//见：https://developers.google.com/maps/documentation/javascript/reference#InfoWindow
//“锚点是从锚点位置到信息窗口顶端的偏移。”
return-1*this.get（'anchorPoint'）.y；
}
});

更新3

使用outerWidth（）和outerHeight（）更好地定位，以考虑边界等因素。删除阴影div

​

//========================
//工具提示类定义
//扩展覆盖视图：
//   https://developers.google.com/maps/documentation/javascript/reference#OverlayView
//========================
变量工具提示
工具提示=功能（提示）{
this.tip=tip；
这个.buildDOM（）；
};
$.extend（Tooltip.prototype、google.maps.OverlayView.prototype、{
//构建DOM
buildDOM:function（）{
//窗口分区
this.wdiv=$（“”）.addClass（'Window'）.append（this.tip）；
//开始关闭
这个。关闭（）；
},
//API-onAdd
onAdd:function（）{
$（this.getPanes（）.floatPane）.append（this.wdiv）；
},
//API-onRemove
onRemove:function（）{
this.wdiv.detach（）；
},
//API-绘图
绘图：函数（）{
变量位置，左侧，顶部；
//投影是否可访问？
如果（！this.getProjection（））返回；
//位置是否可以访问？
如果（！this.get（'position'））返回；
//转换投影
pos=this.getProjection（）.fromLatLngToDivPixel（this.get（'position'）；
//顶偏移
top=pos.y-this.getAnchorHeight（）/2-this.wdiv.outerHeight（）/2；
//左偏移
if（this.getMap（）.getCenter（）.lng（）>this.get（'position'）.lng（））{
左=位置x+此.wdiv.outerWidth（）*0.3；
}否则{
左=位置x-此.wdiv.outerWidth（）*1.3；
}
tooltip = new Tooltip("text");
...
tooltip.open(map, marker);

//========================
// Tooltip Class Definition
//   extends OverlayView:
//   https://developers.google.com/maps/documentation/javascript/reference#OverlayView
//========================
var Tooltip
Tooltip = function(tip) {
    this.tip = tip;
    this.buildDOM();
};

$.extend(Tooltip.prototype, google.maps.OverlayView.prototype, {

    // build the DOM
    buildDOM: function() {
        // Body DIV
        this.bdiv = $("<div></div>").addClass('WindowBody').html(this.tip);
        // Window DIV
        this.wdiv = $("<div></div>").addClass('Window').append(this.bdiv);
        // Shadow DIV
        this.sdiv = $("<div></div>").addClass('WindowShadow');
        // Start Closed
        this.close();
    },

    // API - onAdd
    onAdd: function() {
        $(this.getPanes().floatPane).append(this.wdiv);
        $(this.getPanes().floatShadow).append(this.sdiv);
    },

    // API - onRemove
    onRemove: function() {
        this.wdiv.detach();
        this.sdiv.detach();

    },

    // API - draw
    draw: function() {
        var pos, left, top;
        // projection is accessible?
        if (!this.getProjection()) return;
        // position is accessible?
        if (!this.get('position')) return;
        // convert projection
        pos = this.getProjection().fromLatLngToDivPixel(this.get('position'));
        // top offset
        top = pos.y - this.getAnchorHeight() / 2;
        // left offset
        if (this.getMap().getCenter().lng() > this.get('position').lng()) {
            left = pos.x + this.wdiv.width() * 0.5;
        } else {
            left = pos.x - this.wdiv.width() * 1.5;
        }
        // window position
        this.wdiv.css('top', top);
        this.wdiv.css('left', left);
        // shadow position
        this.sdiv.css('top', (top - this.getAnchorHeight() / 2));
        this.sdiv.css('left', left);
        // shadow size
        this.sdiv.width(this.wdiv.width());
        this.sdiv.height(this.wdiv.height());
    },

    // open Tooltip
    open: function(map, anchor) {
        // bind to map
        if (map) this.setMap(map);
        // bind to anchor
        if (anchor) {
            this.set('anchor', anchor);
            this.bindTo('anchorPoint', anchor);
            this.bindTo('position', anchor);
        }
        // need to force redraw otherwise it will decide to draw after we show the Tooltip                    
        this.draw();
        // show tooltip
        this.wdiv.show();
        this.sdiv.show();
        // set property
        this.isOpen = true;
    },

    // close Tooltip
    close: function() {
        // hide tooltip
        this.wdiv.hide();
        this.sdiv.hide();
        // set property
        this.isOpen = false;
    },

    // correctly get the anchorPoint height
    getAnchorHeight: function() {
        // See: https://developers.google.com/maps/documentation/javascript/reference#InfoWindow
        //   "The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow."
        return -1 * this.get('anchorPoint').y;
    }
});

//========================
// Tooltip Class Definition
//   extends OverlayView:
//   https://developers.google.com/maps/documentation/javascript/reference#OverlayView
//========================
var Tooltip
Tooltip = function(tip) {
    this.tip = tip;
    this.buildDOM();
};

$.extend(Tooltip.prototype, google.maps.OverlayView.prototype, {

    // build the DOM
    buildDOM: function() {
        // Window DIV
        this.wdiv = $("<div></div>").addClass('Window').append(this.tip);
        // Start Closed
        this.close();
    },

    // API - onAdd
    onAdd: function() {
        $(this.getPanes().floatPane).append(this.wdiv);
    },

    // API - onRemove
    onRemove: function() {
        this.wdiv.detach();
    },

    // API - draw
    draw: function() {
        var pos, left, top;
        // projection is accessible?
        if (!this.getProjection()) return;
        // position is accessible?
        if (!this.get('position')) return;
        // convert projection
        pos = this.getProjection().fromLatLngToDivPixel(this.get('position'));
        // top offset
        top = pos.y - this.getAnchorHeight() / 2 - this.wdiv.outerHeight()/2;
        // left offset
        if (this.getMap().getCenter().lng() > this.get('position').lng()) {
            left = pos.x + this.wdiv.outerWidth() * 0.3;
        } else {
            left = pos.x - this.wdiv.outerWidth() * 1.3;
        }
        // window position
        this.wdiv.css('top', top);
        this.wdiv.css('left', left);
    },

    // open Tooltip
    open: function(map, anchor) {
        // bind to map
        if (map) this.setMap(map);
        // bind to anchor
        if (anchor) {
            this.set('anchor', anchor);
            this.bindTo('anchorPoint', anchor);
            this.bindTo('position', anchor);
        }
        // need to force redraw otherwise it will decide to draw after we show the Tooltip                    
        this.draw();
        // show tooltip
        this.wdiv.show();
        // set property
        this.isOpen = true;
    },

    // close Tooltip
    close: function() {
        // hide tooltip
        this.wdiv.hide();
        // set property
        this.isOpen = false;
    },

    // correctly get the anchorPoint height
    getAnchorHeight: function() {
        // See: https://developers.google.com/maps/documentation/javascript/reference#InfoWindow
        //   "The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow."
        return -1 * this.get('anchorPoint').y;
    }
});​