Question

如果有必要，我正在尝试创建一个溢出地图的工具提示，但我无法弄明白。
我已经在这个guy的帮助下实现了工具提示，它就像一个魅力，除了当工具提示变大时它不会溢出地图框之外。

fail1 fail2

在我的创建标记方法中，我使用数据创建和填充标记，然后创建工具提示。

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_.style.overflow = "visible";并使用css但它不起作用。你知道我应该怎么做吗？ 总结一下：如何让我的tooltop溢出地图？

Answer 1

使用@ Dr.Molle的建议这里是google地图上溢出工具提示的基本模板。它应该为您提供一个开始，但是您希望在自己的实现中扩展它。这是一个jsfiddle演示，您可以使用它来跟进。

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

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

请注意，工具提示div应与地图的div包含在同一父容器中（以使定位正常工作）。

接下来我们要将工具提示中包含的信息存储在某个地方，我通过为名为marker的{{1}}对象创建属性来实现此目的：

tooltipContent

然后，您希望能够将内容设置为工具提示marker.tooltipContent = 'this content should go inside the tooltip';，并在用户鼠标悬停在div上时显示 - 并且您可以使用map api的事件监听器{ {1}} marker并使用mouseover的{{1}}和marker函数{1}}：

jQuery

现在，您有工具提示，其内容显示在$.html()的{{1}}上 - 但是它位置不正确。这是棘手的部分。您需要找到$.show()的{{1}}当前所在的地图google.maps.event.addListener(marker, 'mouseover', function () { $('#marker-tooltip').html(marker.tooltipContent).show(); });的像素坐标。幸运的是，地图api具有获取这些值的功能 - 为简单起见，我借用了here发布的解决方案。如果您对此背后的进一步阅读感兴趣，建议您从文档中的Map Coordinates部分开始。

无论如何，一旦你引用了该解决方案中提供的功能 - 你就可以获得标记的像素值：

mouseover

marker等于地图上的水平像素值div和marker将等于地图latlng上的垂直像素值。获得这些值后，可以使用var point = fromLatLngToPoint(marker.getPosition(), map);方法相应地更改工具提示的绝对位置。所以听众将更新为：

point.x

当然，您应该在标记上添加div事件的监听器以隐藏工具提示：

point.y

如何在Google Maps V3中创建带有溢出效果的工具提示？

1 个答案: