Google舆图之OverlayView使用（自定义叠加层）

2012-07-20

Google地图之OverlayView使用（自定义叠加层）转载：http://kongjian.baidu.com.cn/lixueliang_zz/blog/item/

Google地图之OverlayView使用（自定义叠加层）

转载：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;
};

热点排行

Web前端

Google舆图之OverlayView使用（自定义叠加层）