我有以下谷歌地图测试：http: //jsfiddle.net/gM6Z6/
如您所见，它获取您的位置，然后使用三个标记在地图上显示它。
我想要做的是当用户将鼠标悬停在三个标记中的任何一个上时，我想在标记头像上显示以下工具提示 NEXT：
var tooltipOptions={
marker:marker,
content: "You're here!",
cssClass:'tooltip'
};
var tooltip = new Tooltip(tooltipOptions);
我不确定如何最好地做到这一点，因为我需要它适用于所有三个标记，并且无论哪个标记悬停在同一位置。它应该总是出现在头像旁边，就像下面的四方形屏幕截图一样，但应该根据屏幕上图标的位置向左或向右移动以使其适合。
任何人都可以帮忙吗？由于文档对我的喜好有点模糊......我可以创建工具提示，但我很困惑如何最好地为所有三个标记显示它，但在相同的位置和视口感知。
干得好：
http://jsfiddle.net/nickaknudson/KVa2d/
tooltip = new Tooltip("text");
...
tooltip.open(map, marker);
可通过 CSS 自定义。
更新
注释代码：http: //jsfiddle.net/nickaknudson/KVa2d/12/
更新 2
删除了不必要的位：http: //jsfiddle.net/nickaknudson/KVa2d/14/
//========================
// 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;
}
});
更新 3
使用 outerWidth() 和 outerHeight() 更好地定位以考虑边框等。删除了阴影 div。
http://jsfiddle.net/nickaknudson/KVa2d/16/ </p>
//========================
// 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;
}
});
资源
您可以使用 mouseover 事件来显示您的工具提示。（请参阅此处的事件文档）。您只需为 marker2 显示它，因为它具有最高的 zIndex 值。
google.maps.event.addListener(marker2, 'mouseout', function() {
});
这是一个使用InfoWindow显示工具提示的 jsFiddle 。您的示例中没有工具提示代码。您可以使用您创建的工具提示更新您的示例吗？