javascript - 如何在Google Maps中实现Yelp Map Marker/Tooltip Effect？

Question

好的，这就是交易，

我试图在我拉到 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");
}

基于这段代码，有人看到我在这个工具提示实现中可能做错了什么吗？

Answer 1

看来这是我能解决的最好的问题了。

希望对您有所帮助？

/*
* 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");

}