我一直在尝试为GoogleMaps设置样式InfoWindow,但是文档在此主题上非常有限。您如何设计风格InfoWindow?
InfoWindow
Google编写了一些代码来协助完成此任务。以下是一些示例:使用InfoBubble,样式标记和“ 信息窗口自定义”(使用OverlayView)的示例。
上面链接中的代码采用不同的路线来获得相似的结果。要点是直接设置InfoWindows的样式并不容易,使用附加的InfoBubble类而不是InfoWindow或覆盖GOverlay可能会更容易。另一种选择是使用javascript(或jQuery)来修改InfoWindow的元素,就像后来的ATOzTOA建议的那样。
这些示例中最简单的示例可能是使用InfoBubble而不是InfoWindow。通过导入此文件(您应该自己托管)可以使用InfoBubble:http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js
InfoBubble的Github项目页面。
与InfoWindow相比,InfoBubble具有非常好的风格:
infoBubble = new InfoBubble({ map: map, content: '<div class="mylabel">The label</div>', position: new google.maps.LatLng(-32.0, 149.0), shadowStyle: 1, padding: 0, backgroundColor: 'rgb(57,57,57)', borderRadius: 5, arrowSize: 10, borderWidth: 1, borderColor: '#2c2c2c', disableAutoPan: true, hideCloseButton: true, arrowPosition: 30, backgroundClassName: 'transparent', arrowStyle: 2 }); infoBubble.open();
您还可以使用给定的地图和标记对其进行调用以在以下位置打开:
infoBubble.open(map, marker);
作为另一个示例,“信息窗口自定义”示例从Google Maps API扩展了GOverlay类,并将其用作创建更灵活的信息窗口的基础。首先创建类:
/* An InfoBox is like an info window, but it displays * under the marker, opens quicker, and has flexible styling. * @param {GLatLng} latlng Point to place bar at * @param {Map} map The map on which to display this InfoBox. * @param {Object} opts Passes configuration options - content, * offsetVertical, offsetHorizontal, className, height, width */ function InfoBox(opts) { google.maps.OverlayView.call(this); this.latlng_ = opts.latlng; this.map_ = opts.map; this.offsetVertical_ = -195; this.offsetHorizontal_ = 0; this.height_ = 165; this.width_ = 266; var me = this; this.boundsChangedListener_ = google.maps.event.addListener(this.map_, "bounds_changed", function() { return me.panMap.apply(me); }); // Once the properties of this OverlayView are initialized, set its map so // that we can display it. This will trigger calls to panes_changed and // draw. this.setMap(this.map_); }
之后,它将继续覆盖GOverlay:
InfoBox.prototype = new google.maps.OverlayView();
然后,您应该重写你需要的方法:createElement,draw,remove和panMap。它相当复杂,但是从理论上讲,您现在只是自己在地图上绘制div,而不是使用普通的信息窗口。
createElement
draw
remove
panMap