Javascript 如何在Google Maps V3中创建溢出可见的工具提示？

我正在尝试创建一个工具提示，如果需要，它会溢出地图之外，但我无法找到它。
我已经在这方面的帮助下实现了工具提示，它就像一个符咒一样工作，只是当工具提示太大时，它不会溢出地图框之外

在“创建标记”方法中，我使用数据创建并填充标记，并创建工具提示

createMarker

function createMarker(number, currentMap, currentMapData) {
                var marker = new MarkerWithLabel({
                    position:new google.maps.LatLng(currentMapData[0], currentMapData[1]),
                    map:currentMap,
                    icon:'/img/sticker/empty.png',
                    shadow:'/img/sticker/bubble_shadow.png',
                    transparent:'/img/sticker/bubble_transparent.png',
                    draggable:false,
                    raiseOnDrag:false,
                    labelContent:"" + number,
                    labelAnchor:new google.maps.Point(3, 30),
                    labelClass:"mapIconLabel", // the CSS class for the label
                    labelInBackground:false
                });

                var html = mapHtml(currentMapData[7], currentMapData[2], currentMapData[4], currentMapData[13], currentMapData[11], currentMapData[12], currentMapData[3], currentMapData[5])

                var tooltipOptions = {marker:marker, content:html, cssClass:'tooltip', href:"/"+currentMapData[7]};
                // create the tooltip
                var tooltip = new Tooltip(tooltipOptions);
            }

tooltip.js

function Tooltip(options) {

    // Now initialize all properties.
    this.marker_ = options.marker;
    this.content_ = options.content;
    this.map_ = options.marker.get('map');
    this.cssClass_ = options.cssClass||null;

    // We define a property to hold the content's
    // div. We'll actually create this div
    // upon receipt of the add() method so we'll
    // leave it null for now.
    this.div_ = null;

    //Explicitly call setMap on this overlay
    this.setMap(this.map_);
    var me = this;
    // Show tooltip on mouseover event.
    google.maps.event.addListener(me.marker_, 'mouseover', function() {
        me.show();
    });
    // Hide tooltip on mouseout event.
    google.maps.event.addListener(me.marker_, 'mouseout', function() {
        me.hide();
    });

    // When clicked move to href
    google.maps.event.addListener(me.marker_, 'click', function() {
        window.location.href = options.href;
    });

}
// Now we extend google.maps.OverlayView()
Tooltip.prototype = new google.maps.OverlayView();

// onAdd is one of the functions that we must implement,
// it will be called when the map is ready for the overlay to be attached.
Tooltip.prototype.onAdd = function() {

    // Create the DIV and set some basic attributes.
    var div = document.createElement('DIV');
    div.style.position = "absolute";
    // Hide tooltip
    div.style.visibility = "hidden";
    if(this.cssClass_)
        div.className += " "+this.cssClass_;

    //Attach content to the DIV.
    div.innerHTML = this.content_;

    // Set the overlay's div_ property to this DIV
    this.div_ = div;

    // We add an overlay to a map via one of the map's panes.
    // We'll add this overlay to the floatPane pane.
    var panes = this.getPanes();
    panes.floatPane.appendChild(this.div_);

}
// We here implement draw
Tooltip.prototype.draw = function() {

    // Position the overlay. We use the position of the marker
    // to peg it to the correct position, just northeast of the marker.
    // We need to retrieve the projection from this overlay to do this.
    var overlayProjection = this.getProjection();

    // Retrieve the coordinates of the marker
    // in latlngs and convert them to pixels coordinates.
    // We'll use these coordinates to place the DIV.
    var ne = overlayProjection.fromLatLngToDivPixel(this.marker_.getPosition());

    // Position the DIV.
    var div = this.div_;
    div.style.left = ne.x + 'px';
    div.style.top = ne.y + 'px';

}
// We here implement onRemove
Tooltip.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);
}

// Note that the visibility property must be a string enclosed in quotes
Tooltip.prototype.hide = function() {
    if (this.div_) {
        this.div_.style.visibility = "hidden";
    }
}

Tooltip.prototype.show = function() {
    if (this.div_) {
        this.div_.style.visibility = "visible";
    }
}

我已尝试设置

this.div\uuu.style.overflow=“visible”在代码和css中，但不起作用。你知道我该怎么做吗？
总而言之：如何使我的工具提示溢出到地图之外？
根据@Dr.Molle的建议，这里有一个在谷歌地图上溢出工具提示的基本模板。它应该给你一个开始，不管你想在你自己的实现中扩展它。下面是一个演示，您可以使用它来进行后续操作

我做的第一件事是创建一个
div
来保存工具提示中需要的信息。接下来，对此容器应用一些初始样式：

#marker-tooltip {
  display: none;
  position:absolute;
  width: 300px;
  height: 200px;
  background-color: #ccc;
  margin: 15px;
}

请记住，工具提示
div
应包含在与地图的
div
相同的父容器中（以便定位正常工作）

接下来，我们要将工具提示中包含的信息存储到某个位置，我通过为名为
tooltipContent
的
标记创建一个属性来实现这一点：

marker.tooltipContent = 'this content should go inside the tooltip';

然后，您希望能够将内容设置为工具提示
div
，并在用户鼠标悬停在
标记上时显示它-您可以使用
标记上
mouseover
的map api事件侦听器和
jQuery
的
$.html（）
和
$.show（）来执行此操作
功能：

google.maps.event.addListener(marker, 'mouseover', function () {        
    $('#marker-tooltip').html(marker.tooltipContent).show();
});

现在，工具提示的内容显示在
标记的
鼠标上方
——但是它的位置不正确。这是棘手的部分。您需要找到地图
div
的像素坐标，该
标记
的
latlng
当前处于启用状态。幸运的是，MapsAPI有获取这些值的函数——为了简单起见，我借用了发布的解决方案。如果你对后面的阅读感兴趣，我建议你从文件中关于的章节开始

无论如何，一旦参考了该解决方案中提供的函数，就可以获得标记的像素值：

var point = fromLatLngToPoint(marker.getPosition(), map);

其中
point.x
将等于地图
div
上的水平像素值，
point.y
将等于地图
div
上的垂直像素值。获得这些值后，可以使用
$.css（）
方法相应地更改工具提示的绝对位置。因此，侦听器将更新为：

google.maps.event.addListener(marker, 'mouseover', function () {
    var point = fromLatLngToPoint(marker.getPosition(), map);
    $('#marker-tooltip').html(marker.tooltipContent).css({ 'left': point.x, 'top': point.y }).show();
});

当然，您应该为标记上的
mouseout
事件添加一个侦听器，以隐藏工具提示：

google.maps.event.addListener(marker, 'mouseout', function () {
    $('#marker-tooltip').hide();
});

这不是工具提示溢出的问题，而是地图溢出的问题。映射容器的DOM中的任何内容都不能超出映射。为了达到预期的效果，您必须在地图容器外创建一个元素，并在地图的视口发生变化时更新其在页面内的位置。啊哈！这是有道理的！非常感谢。你有什么建议吗？也许是某个地方的教程？这太完美了！工作很有魅力。一直删除了工具提示，并使用：1对代码进行了一些修改单击时，移动到href google.maps.event.addListener（标记，'click'，function（）{window.location.href='\/'+currentMapData[7]；}）；这样，我就不用打开信息窗口弹出窗口，而是在单击2时移动到正确的位置。”left'：point.x-250，将弹出窗口放置在左侧，因为我的地图位于右侧=）。非常感谢。