好的,这就是交易,
我试图在我拉到 Google map 上的一些 Yelp map 标记上显示工具提示(而不是 ginfowindow)。
我希望获得与 Yelp 完全相同的效果。即工具提示似乎设置为它的 z-index 始终高于附近的所有其他元素,一旦它看起来太靠近页面顶部/页面底部等,它就会移动工具提示......
到目前为止,我已经能够通过将工具提示附加到正文(而不是 map )来使工具提示的 z-index 正确显示。我以为我走在正确的轨道上,但后来我在一个更大的显示器上检查了实现,并意识到我想出的解决方案是将工具提示推得太右。请看下面的代码:
GEvent.addListener(marker,'mouseover',function(){
showMessage(this, infoWindowHtml);
});
GEvent.addListener(marker,'mouseout',function(){
$("#tooltip").hide();
});
/*
* Displays a Tooltip for the currently hovered marker
*/
function showMessage (marker, text) {
var markerOffset = ymap.fromLatLngToContainerPixel(marker.getPoint());
theight = 20;
twidth = 175;
var twidth2 = $(".maincontent").width() + 12;
$("#tooltip")
.fadeIn()
.html("<div class='content'>"+text+"</div>")
.css({ top: markerOffset.y - theight, left: markerOffset.x + twidth2 - twidth/2 })
.appendTo("body");
}
基于这段代码,有人看到我在这个工具提示实现中可能做错了什么吗?
最佳答案
看来这是我能解决的最好的问题了。
希望对您有所帮助?
/*
* Hide our tooltip DIV until a
* point has been hovered over
* on the map
*/
$("#tooltip").hide();
/*
* Creates a marker for the given business and point
*/
function createMarker(biz, point, markerNum, category) {
var infoWindowHtml = generateInfoWindowHtml(biz)
var marker = new GMarker(point, yicon);
marker.mycategory = category;
yelpMarkers.push(marker);
ymap.addOverlay(marker);
GEvent.addListener(marker,'mouseover',function(){
showMessage(this, infoWindowHtml);
});
GEvent.addListener(marker,'mouseout',function(){
$("#tooltip").hide();
});
/*
* Displays a Tooltip for the currently hovered marker
*/
function showMessage (marker, text) {
var markerOffset = ymap.fromLatLngToContainerPixel(marker.getPoint());
var winWidth = $(window).width();
var winHeight = $(window).height();
var theight = 20;
//The twidth number below is half of our tooltip width.
var twidth = 175;
/*
* The twidth2 number below is the width of the main content
* container area. Assumes a default window width of 1265
*/
var twidth2 = 397;
var extraPad;
var tLeft;
var tTop;
// Setup our tooltip's width offset for different window widths
if (winWidth > 1265) {
extraPad = winWidth - 1265;
tLeft = markerOffset.x + twidth2 + (extraPad/2);
}
else if (winWidth < 1265) {
extraPad = 1265 - winWidth;
tLeft = markerOffset.x + twidth2 - (extraPad/2);
}
else { tLeft = markerOffset.x + twidth2; }
// Setup our tooltip's height offset for different window height
tTop = markerOffset.y - theight;
$("#tooltip")
.fadeIn()
.html("<div class='content'>"+text+"</div>")
.css({ top: tTop, left: tLeft })
.appendTo("body");
}
关于javascript - 如何在Google Maps中实现Yelp Map Marker/Tooltip Effect?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1183644/