我一直在尝试设计我的 Google map 的样式 InfoWindow
,但有关此主题的文档非常有限。如何设置 InfoWindow
的样式?
最佳答案
Google 编写了一些代码来协助完成此操作。以下是一些示例:Example using InfoBubble , Styled markers和 Info Window Custom (使用 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's Github project page .
与 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();
您还可以使用给定的 map 和标记调用它以打开:
infoBubble.open(map, marker);
作为另一个示例,自定义信息窗口示例从 Google map 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
。它相当复杂,但理论上您现在只是在 map 上自己绘制一个 div,而不是使用普通的信息窗口。
关于css - 样式化 Google map 信息窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5634991/