样式化Google Maps InfoWindow

样式化Google Maps InfoWindow

Google编写了一些代码来协助完成此任务。以下是一些示例：使用InfoBubble，样式标记和“ 信息窗口自定义”（使用OverlayView）的示例。

上面链接中的代码采用不同的路线来获得相似的结果。要点是直接设置InfoWindows的样式并不容易，使用附加的InfoBubble类而不是InfoWindow或覆盖GOverlay可能会更容易。另一种选择是使用javascript（或jQuery）来修改InfoWindow的元素，就像后来的ATOzTOA建议的那样。

这些示例中最简单的示例可能是使用InfoBubble而不是InfoWindow。通过导入此文件（您应该自己托管）可以使用InfoBubble：http://google-maps-utility-library-v3.googlepre.com/svn/trunk/infobubble/src/infobubble.js

InfoBubble的Github项目页面。

与InfoWindow相比，InfoBubble具有非常好的风格：

 infoBubble = new InfoBubble({      map: map,      content: '<div >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类，并将其用作创建更灵活的信息窗口的基础。首先创建类：

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，而不是使用普通的信息窗口。