Question

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

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

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

我的问题是......你如何改变默认的白色气球弹出窗口？

干杯！

Answer 1

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

Answer 2

就个人而言，我不会使用谷歌的任何自定义叠加脚本等。我创建了一个自定义的PHP页面，其中包含iframe，我可以在其中加载自定义的css文件，还可以创建自定义的DIV，它们会在地图的顶部重新定位，然后在打开时进行重新定位。

你可以使用＆＃34; Drag，Dragstart，Dragend＆＃34;事件，以帮助您重新定位您已创建的元素。

如果您在页面上设置了自定义标记，则可以使用此功能获取其像素位置：

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，＆＃39; drag＆＃39;，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 */
},

有时你只需要在框外思考

Answer 3

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

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

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

Answer 4

在gmaps-utility-library-dev和ExtInfoWindow utility

中查看PopupMarker utility及更具体的内容

Answer 5

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

Google地图自定义内容框？

5 个答案: