1

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

失败1 失败2

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

创建标记

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);
            }

工具提示.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设置，但它不起作用。你知道我应该怎么做吗？ 总结一下：如何使我的工具顶部溢出地图？

4

1 回答 1

2

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

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

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

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

接下来我们想将我们包含在工具提示中的信息存储在某处，我通过为marker对象创建一个名为的属性来做到这一点tooltipContent：

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

然后，您希望能够将内容设置为工具提示div并在用户鼠标悬停在marker- 时显示它，您可以使用地图 api 的事件侦听器来执行此操作mouseover，marker并使用jQuery's$.html()和$.show()函数：

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

mouseover现在，您可以看到带有内容的工具提示marker- 但是它的位置不正确。这是棘手的部分。您需要找到 's 当前所在的地图的div像素marker坐标latlng。幸运的是，地图 api 具有获取这些值的功能 - 为简单起见，我借用了此处发布的解决方案。如果您对这背后的进一步阅读感兴趣，我建议您从文档中的地图坐标部分开始。

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

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

Wherepoint.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();
});
于 2013-10-21T20:36:04.517 回答