转载：http://kongjian.baidu.com.cn/lixueliang_zz/blog/item/0028ab53a1ecb91c0df3e3a5.html
Google Maps API 第 3 版提供了用于创建自定义叠加层的 OverlayView 类。OverlayView 是一个基类，提供了您在创建叠加层时必须实现的若干方法。该类还提供了一些方法，用于实现屏幕坐标和地图位置之间的转换。
要创建自定义叠加层，请执行以下操作：
- 将自定义对象的
prototype 设置为 google.maps.OverlayView() 的新实例。这可以有效地实现叠加层类的“子类化”。
- 为自定义叠加层创建构造函数，并将该构造函数中的所有初始化参数都设置为自定义属性。
- 在原型中实现
onAdd() 方法，以将叠加层附加到地图上。当地图准备好附加叠加层后，系统将会调用 OverlayView.onAdd()。
- 在原型中实现
draw() 方法，以处理对象的视觉显示。同样，在对象首次显示后，系统将会调用 OverlayView.draw()。
- 您还应当实现
onRemove() 方法，以清理在叠加层中添加的所有元素。
Html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>OverlayView</title>
<link type="text/css" rel="Stylesheet" href="/style/mapMaker.css" />
<script type="text/javascript" src="</script'>http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
<script type="text/javascript" src="/javascript/OverlayView.js"></script>
</head>
<body onload="initialize()">
<div id="show" style="width:600px;height:210px"></div>
</body>
</html>
OverlayView.js
var overlay;
var geocoder;
function initialize(){
address = $G("address");
name = $G("name");
geocoder=new google.maps.Geocoder();//实例化地址解析
var myLatLng = new google.maps.LatLng(30.658602, 104.064587);//初始化坐标中心点，这里以成都为列
var myOptions = {
zoom: 15,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP//指定地图类型
};
var map = new google.maps.Map(document.getElementById("show"), myOptions);
geocoder.geocode({
'address':address
},function (results,status) {
if(status==google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);//将地图中心定位到查询结果
overlay = new LableMarker(map,name,results[0].geometry.location);//实例化OverlayView类
}
});
}
function LableMarker(map, text, latLng){
this.map_ = map;
this.text_ = '<div class="iconTheStyle"><div class="s1"></div><div class="s2">'+text+'</div><div class="s3"></div><div class="s4"></div><div class="s5"></div></div>';
this.latLng_ = latLng;
this.div_ = null;
this.setMap(map);
}
// 继承自 google.maps.OverlayView
LableMarker.prototype = new google.maps.OverlayView();
// 当准备将 悬浮层 添加到地图上时 调用
LableMarker.prototype.onAdd = function(){
var div = document.createElement('DIV');
div.style.border = 'none';
div.style.position='absolute';
div.innerHTML = this.text_;
this.div_ = div;
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
// 当第一次在地图上显示时 调用
LableMarker.prototype.draw = function(){
var overlayProjection = this.getProjection();
var latLng = overlayProjection.fromLatLngToDivPixel(this.latLng_);
// 设置层的大小 和 位置
var div = this.div_;
var size = new google.maps.Size(-26, -42); // 修正坐标的值;
div.style.left = (latLng.x + size.width) + 'px';
div.style.top = (latLng.y + size.height) + 'px';
};
// 当设置 悬浮层的 setMap(null) 会自动调用
LableMarker.prototype.onRemove = function(){
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
分享到：
相关推荐
如果内置的叠加层无法满足需求，开发者可以创建自定义叠加层，实现 OverlayView 接口，这提供了无限的扩展可能性。 总的来说，Google Maps API V3 提供了丰富的叠加层功能，使得开发者可以构建功能强大且互动性强...
开发者可以使用 OverlayView 对象和 MapType 对象来自定义叠加层和地图类型，以便在地图上显示不同的视图。 十、图层 谷歌地图 Google Map API V3 中提供了多种图层，例如自行车图层、FusionTables 图层、KML 图层...
谷歌地图API提供了叠加层（Overlay）和地图类型（MapType）服务，可以用于添加自定义的叠加层和地图类型。API提供了多种叠加层和地图类型选项，可以根据需要进行设置。 图层 谷歌地图API提供了多种图层（Layer）...
- `OverlayView`：自定义覆盖物的基类。 - `MapType`、`MapTypeRegistry`和`Projection`：处理地图类型和投影。 - `ImageMapType`和`ImageMapTypeOptions`：创建基于图像的地图类型。 - `StyledMapType`和`...
- **OverlayView**：自定义覆盖层的基类。 - **MapType**：地图类型。 - **MapTypeRegistry**：管理可用的地图类型。 - **Projection**：投影。 - **ImageMapType**：基于图像的地图类型。 - **ImageMapTypeOptions*...
3. **OverlayView和MapPanes**：OverlayView用于创建自定义地图覆盖物，可以实现更高级的交互和视觉效果。MapPanes是地图上不同层的集合，用于控制覆盖物的绘制位置。 4. **MapCanvasProjection**：提供地图像素...
`DirectionsRenderer`和`DirectionsService`用于路线规划，`ElevationService`用于获取海拔信息，以及各种叠加层和图层服务，如`OverlayView`、`MapType`、`GroundOverlay`等，允许开发者添加自定义地图覆盖物和数据...
8. **叠加层和地图类型**：`OverlayView`是创建自定义地图覆盖物的基类，`MapType`和`MapTypeRegistry`用于管理不同的地图类型。`ImageMapType`和`StyledMapType`则允许你自定义地图的显示样式。 9. **图层**：`...
- **OverlayView**: 自定义覆盖层的基类。 - **MapType**: 地图类型对象。 - **MapTypeRegistry**: 地图类型注册表。 - **Projection**: 投影对象。 - **ImageMapType**: 图像地图类型。 - **ImageMapTypeOptions**:...
- **OverlayView**、**MapType** 和 **MapTypeRegistry**：涉及自定义地图类型和叠加层的创建和管理。 - **Projection** 和 **ImageMapType**：处理坐标转换和基于图像的地图类型。 #### 图层 - **BicyclingLayer*...
`OverlayView`是一个基类，用于创建自定义覆盖物。`MapType`代表地图的一种样式，`MapTypeRegistry`管理所有可用的地图类型。`Projection`接口处理地图坐标和像素坐标之间的转换。`ImageMapType`和`...