显示接近精确点的html元素的步骤

时间:2011-03-21 05:45:02

标签: jquery google-maps-api-3

我知道如何放置标记,所有属性似乎都是正确的

var marker = new google.maps.Marker({
        position : latlng,
        map: map,
        icon: icon,
        shadow: icon_shadow,
        title : name
    });
google.maps.event.addListener(marker, 'mouseover', function() {
    jQuery('#info').fadeIn();
  });

如何定位信息框以使其接近精确定位? 在我看到这个实际应用的网站似乎都使用了api v2。

1 个答案:

答案 0 :(得分:0)

假设您将谷歌地图设为var地图,并将您的标记命名为标记

emptyoverlay = new google.maps.OverlayView();
emptyoverlay.draw = function() {};
emptyoverlay.setMap(map);
google.maps.event.addListener(marker,'mouseover',function(){
        //Getting the x/y positions
        var absPos  = emptyoverlay.getProjection().fromLatLngToContainerPixel(this.getPosition());
        absPos.x += 10; // Now we have it we can shift around
        absPos.y += -10; // Where the box shows up
        console.log(absPos);
        //jQuery magic starts here
        jQuery('#message').show().html('anything you want').css({left: absPos.x, top: absPos.y});
});
google.maps.event.addListener(marker,'mouseout',function(){
        jQuery('#message').hide();
});