与地图上的控件不同,地图上的叠加层( Overlay )指的是和某个经纬度坐标绑定,能够跟随地图的缩放拖拽而相应移动的 DOM 原始,地图 API 文档里定义的 GMarker 、 GPolyline 、 GInfoWindow 都属于叠加层。右边地图上显示的交通信息的图标就是一个叠加层。
先看一段Hello World 的代码吧:
var MyOverlay = function(latlng_) {
this.latlng = latlng_;
};
MyOverlay.prototype.initialize = function(map_) {
this.map = map_;
var label_ = document.createElement("div");
var container_ = map_.getPane(G_MAP_FLOAT_PANE);
container_.appendChild(label_);
label_.innerHTML = "<span style='color:#FF0000;background-color:#FFFFFF;'>Hello World!</span>";
label_.style.position = "absolute";
this.label = label_;
this.redraw();
}
MyOverlay.prototype.redraw = function() {
var position = this.map.fromLatLngToDivPixel(this.latlng);
this.label.style.left = position.x + "px";
this.label.style.top = position.y + "px";
}
MyOverlay.prototype.remove = function() {
this.label.parentNode.removeChild(this.label);
}
上面的代码中, MyOverlay 就是一个自定义的叠加层,需要的时候可以创建一个 MyOverlay 的实例,然后使用 map.addOverlay() 就可以在地图上加上这个叠加层了。这里的叠加层是在给定的位置(地图加载时的中心点)加上一个 Hello World 的文本,以后,无论你怎么拖动缩放地图,这个文本在地图上的位置会跟着地图变化。
下面详细解释一下代码:
var MyOverlay = function(latlng_) {
this.latlng = latlng_;
};
声明 MyOverlay 类的构造函数,创建该类的实例是需要给一个 GLatLng 类型的坐标对象作为参数。
MyOverlay.prototype = new GOverlay();
声明这个类继承自GOverlay
接下来的initialize 、redraw 、remove 都是实现了在GOverlay 接口中定义的抽象方法,这些方法在MyOverlay 类的对象初始化、地图拖拽缩放、从地图上删除的时候都会被自动调用。
Overlay 也是一个DOM 元素,所以在initialize 方法中需要做的就是定义这个DOM 元素并且把它添加到合适的地方去。 使用 GMap2 对象(作为参数传递进来)的 getPane 方法取得 Overlay 需要依附的图层(这个图层按照 z-index 的不同现在可以分为七种不同的图层,我就不列举了,需要的可以到文档里查查 GMapPane 这个类),也就是 Overlay 所要依附的 DOM 容器(不同于 GMap2 对象的 DOM 容器),定义好 Overlay 的样式和内容,然后作为子元素添加到刚才取到的图层里就可以了。
在initialize 方法中需要注意的是,作为叠加层的DOM 元素的position 样式属性必须设置为absolute ,并且需要显式的调用redraw 方法,才能保证在叠加层第一次加载时的位置显示正确。
对于 redraw 方法,就是在地图的位置发生变动以后能够重新计算叠加层的坐标并重新设定叠加层的显示位置,关键点就是使用 GMap2.fromLatLngToDivPixel() 方法来取得叠加层的 DOM 绝对坐标,不是很理解这个坐标的话可以看看 我以前总结果的地图坐标系统 。
对于 remove 方法,地图在调用 removeOverlay 的时候会自动调用这个方法,把你的叠加层从地图上删除。
这里展示的只是一个添加简单文本的 Overlay 的例子,如果你需要添加更丰富的文本、图片,或者需要这个 Overlay 能够监听一些事件,比如单击、双击等等,只需要在 initialize() 方法里对 Overlaly 的 DOM 元素做更多的声明和控制就可以了,和你在网页中其他地方定义一个 DOM 元素没什么两样。