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" "">
<html xmlns=""><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 οnlοad="initialize()"><div id="show" ></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.OverlayViewLableMarker.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;};-
- 上一篇
- 下一篇