谷歌地图自定义内容框？答案

【问题标题】：Google Maps custom content boxes?谷歌地图自定义内容框？
【发布时间】：2011-05-17 04:43:58
【问题描述】：

我似乎在 Google Maps V3 文档中找不到有关为 Google 地图创建自定义内容框的内容。

以下是自定义内容框的示例：

http://www.apple.com/retail/alamoana/map/

我的问题是……如何更改默认的白色气球弹出窗口？

干杯！

【问题讨论】：

标签： javascript google-maps maps google-maps-api-3

【解决方案1】：

查看v3 utility libraries 中的信息框工具包。我在dev.mapfaire.com 上使用它们，如果你想看看的话。

【讨论】：

【解决方案2】：

就个人而言，我不使用任何谷歌的自定义覆盖脚本等。我制作了一个包含 iframe 的自定义 php 页面，我可以在其中加载自定义 css 文件，还创建了覆盖地图顶部的自定义 DIV，然后在打开时在拖动时重新定位。

您可以使用“Drag,Dragstart,Dragend”事件来帮助您重新定位已创建的元素。

如果您在页面上设置了自定义标记，您可以使用此函数获取它们的像素位置：

getPosition: function (marker) {
        var map = this.map /* Your map, in my case is part of my controller object linked to this.map */;
        var scale = Math.pow(2, map.getZoom());
        var nw = new google.maps.LatLng(
            map.getBounds().getNorthEast().lat(),
            map.getBounds().getSouthWest().lng()
        );
        var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
        var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
        var pixelOffset = new google.maps.Point(
            Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
            Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
        );
        return pixelOffset; /* Returns the top left pixel of the specified marker on the specified map */
    }

然后我使用了一个 setPosition 函数，该函数在窗口拖动时使用，它将自定义元素的位置设置为标记的位置。拖动事件可以这样设置： google.maps.addEventListener(map,'drag',function () { setPosition(marker,element); });

setPosition 函数使用 getPosition(marker) 函数简单地收集元素的宽度、高度以及与标记关联的像素偏移：

setPosition: function (marker,element) {
    var p = this.getPosition(marker),
        s = {width:element.offsetWidth,height:element.offsetHeight},
        markerOffset = {width:58,height:58};
    element.style.left = p.x - (s.width/2) + (markerOffset.width/2) + "px"; /* We set the element's left position to the marker's position + half of our element's width + half of the marker's width's so it is centered */
    element.style.top = p.y - s.height - (markerOffset.height) + 10 + "px"; /* We set the element's top position to the marker's position + our element's height + markers height so it is 10px above our marker vertically */
},

有时你只需要跳出框框思考一下

【讨论】：

【解决方案3】：

该示例使用的是谷歌地图的第二个版本。这些功能可能在第三个版本中不可用。

但是您可以在 infowindows 中添加任何 html 代码并对其进行个性化设置。我不确定您是否可以直接更改它们的外观，但您绝对可以更改内容的外观。

编辑：我找到了一些示例代码：http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html

【讨论】：

【解决方案4】：

查看gmaps-utility-library-dev 和ExtInfoWindow utility 和PopupMarker utility 中更具体的内容

【讨论】：

【解决方案5】：

正如 Sudhir 所指出的，Infobox 插件是一种实现您想要的方式。我最近回答了一个关于using the infobox plugin for google maps api 3 的类似问题，并提供了一个完整的例子。

【讨论】：