如何在谷歌地图中实现 Yelp 地图标记/工具提示效果？答案

【问题标题】：How to achieve the Yelp Map Marker/Tooltip Effect in Google Maps?如何在谷歌地图中实现 Yelp 地图标记/工具提示效果？
【发布时间】：2009-07-26 03:22:36
【问题描述】：

好的，这就是交易，

我正在尝试在一些 Yelp 地图标记上显示工具提示（而不是 ginfowindow），这些标记是我拉到 Google 地图上的。

我希望获得与 Yelp 完全相同的效果。即工具提示似乎设置为使其z-index始终高于附近的所有其他元素，一旦工具提示出现它太靠近页面顶部/页面底部等，它就会移动工具提示......

到目前为止，我已经能够通过将工具提示附加到正文（而不是地图）来正确显示工具提示的 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");
}

根据这段代码，有没有人看到我在执行这个工具提示时可能做错了什么？

【问题讨论】：

我能够通过附加到正文并找到用户窗口的宽度（通过Javascript）来达到预期的效果。之后，将浏览器宽度的差异删除/添加到我的工具提示的左侧 CSS 位置是一个简单的数学问题。

标签： javascript jquery css google-maps codeigniter

【解决方案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");

}

【讨论】：

【解决方案2】：

/*
* Displays a Tooltip for the currently hovered marker
*/

function showToolTip(marker,div_data)
{
    var my_div = "#bubble_container"; // div to show message
    jQuery(my_div).hide();   
    var markerOffset = map.fromLatLngToContainerPixel(marker.getPoint());
    var  pos_map_cotainer= jQuery("#gmap_profile").position();   // getting position of map container
    var left_map_container = pos_map_cotainer.left;
    var top_map_container = pos_map_cotainer.top;
    var div_height = 115;  // height of message div
    var div_width = 378;   // width of message div
    var tLeft = (markerOffset.x + left_map_container)- div_width ;
    var tTop = (markerOffset.y + top_map_container) - div_height ;
    jQuery(my_div).html(div_data);
    jQuery(my_div).css({'left':tLeft,'top':tTop});
    jQuery(my_div).fadeIn(300);
}

function hideToolTip()
{
    jQuery("#bubble_container").fadeOut(300);
}

【讨论】：