[英]Show tooltip on hover of custom marker
I have the following Google Map test: http://jsfiddle.net/gM6Z6/ 我有以下Google Map测试: http : //jsfiddle.net/gM6Z6/
As you can see it gets your position and then shows it on the map using three markers. 您可以看到它获取您的位置,然后使用三个标记在地图上显示它。
What I want to do is when a user hovers over any of the three markers, I want to show the following tooltip NEXT to the marker avatar: 我想要做的是当用户将鼠标悬停在三个标记中的任何一个上时,我想向标记头像显示以下工具提示NEXT:
var tooltipOptions={
marker:marker,
content: "You're here!",
cssClass:'tooltip'
};
var tooltip = new Tooltip(tooltipOptions);
I'm not sure how to best do this, as I need this to work for all three markers, and be in the same position regardless of which marker was hovered. 我不知道如何最好地做到这一点,因为我需要这个来处理所有三个标记,并且无论哪个标记悬停都处于相同的位置。 It should ALWAYS appear next to the avatar like in the foursquare screenshot below BUT should move to the left or right dependant on the position of the icon on screen to allow it to fit.
它应该总是出现在头像旁边,就像下面的foursquare截图一样,但是应该向左或向右移动,这取决于屏幕上图标的位置以使其适合。
Can anyone help? 有人可以帮忙吗? As the docs are a little vague for my liking on this... I can create the tooltip but I'm confused how best to show it for all three markers but in the same position and viewport aware.
因为我对这个文档有点含糊不清...我可以创建工具提示,但我很困惑如何最好地显示所有三个标记,但在相同的位置和视口识别。
Here you go: 干得好:
http://jsfiddle.net/nickaknudson/KVa2d/ http://jsfiddle.net/nickaknudson/KVa2d/
tooltip = new Tooltip("text");
...
tooltip.open(map, marker);
Customizable via CSS. 可通过CSS自定义。
UPDATE UPDATE
Commented code: http://jsfiddle.net/nickaknudson/KVa2d/12/ 评论代码: http : //jsfiddle.net/nickaknudson/KVa2d/12/
UPDATE 2 更新2
Removed unnecessary bits: http://jsfiddle.net/nickaknudson/KVa2d/14/ 删除不必要的位: 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;
}
});
UPDATE 3 更新3
Better positioning using outerWidth() and outerHeight() to take borders etc into account. 使用outerWidth()和outerHeight()更好地定位以考虑边框等。 Removed shadow div.
删除了阴影div。
http://jsfiddle.net/nickaknudson/KVa2d/16/ http://jsfiddle.net/nickaknudson/KVa2d/16/
//========================
// 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;
}
});
RESOURCES 资源
You can use the mouseover event to display your tooltip. 您可以使用mouseover事件来显示工具提示。 (See events doc here ).
(请参阅此处的活动文档)。 You only need to show it for marker2 since it has the highest zIndex value.
您只需要为marker2显示它,因为它具有最高的zIndex值。
google.maps.event.addListener(marker2, 'mouseout', function() {
});
Here's a jsFiddle displaying a tooltip using InfoWindow . 这是一个使用InfoWindow显示工具提示的jsFiddle。 You don't have the tooltip code in your example.
您的示例中没有工具提示代码。 Can you update your example using the tooltip you created?
你能用你创建的工具提示更新你的例子吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.