转载: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;
};
分享到:
相关推荐
按照Google Maps官方文档页面的说明初始化Google Map,然后使用CustomOverlay函数显示自定义叠加层。 选项 latlng-自定义叠加层的纬度和经度 map- Google Map对象 内容-覆盖内容 verticalOffset-叠加层的垂直偏移 ...
qgis高德osm街道叠加层
例使用SuperMap iClient 6R for Flex开发模式,实现Rest地图与自定义WMTS地图叠加
奥维地图的扩展的新的地图源
karendoesthings叠加 这是我的NodeCG流叠加层,围绕Polymer元素和GreenSock的动画库构建。 虽然它曾经主要基于,但后来已精简为仅包含基本要素。覆盖的原因我需要的东西适合我的整体色彩设计,可以自定义,可扩展,...
Google 地图 – 叠加层 叠加层是地图上绑定到经度/纬度坐标的对象,会随您拖动或缩放地图而移动。 Google 地图 API 有如下几种叠加层: 1.地图上的点使用标记来显示,通常显示自定义图标。标记是 GMarker 类型的...
添加GPS位置标注 叠加图层 google地图显示
SuperMap iClient 6R JavaScript Rest地图与WMS地图的叠加
我的自定义Gentoo叠加层 我关心的某些包裹的个人覆盖物。 安装 安装app-eselect/eselect-repository (新方式)或app-portage/layman (旧方式),然后: # for app-eselect/eselect-repository eselect repository...
百度、高德、腾讯、天地图、谷歌、必应等自定义地图/图片叠加层/瓦片图/金字塔图地图切图高清切片生成工具 MapCutter https://blog.csdn.net/surfsky/article/details/106951716
简单且完全可自定义的叠加层。 格式化如何运作? 非常简单:程序将%paramName替换为参数值。 内置参数。 • %freerammb -mb中的免费ram • %freeramkb以kb为单位的免费ram • %line新行取消更改• %percent -“%...
google map v3 讲述叠加层 内附代码讲解 为了让用户能尽快使用第三版API,Google已经在实验室中将其基本的功能发布,点这里可以查看文档,当然全部功能并没有完全开发好,用户可以对其提供一些使用上的反馈,用户...
LCGoLSpeedrunOverlay 劳拉·克罗夫特(Lara Croft)和光之守护者(Guardian of Light)的自定义叠加层
这是基于python的服务器,用于创建平铺地图的Google Earth叠加层。 您现在还可以在网络浏览器中显示地图,测量距离并将地图打印为高质量的PDF。 开发人员还可以将GEOS用作库来转换坐标或以编程方式访问地图打印...
海康威视调用官方sdk,实时视频播放、截屏、叠加层显示文字、边框等,解决长时间运行报错故障。此方法调用摄像头内容最稳定。
SuperMap iClient 6R for JavaScriptJavaScript天地图叠加REST地图服务由于天地图官网url地址更新,此范例重新制作
var config = { REQUEST:"GetMap", //操作名称 VERSION:"1.1.1", //请求服务的版本 SERVICE:"WMS", //服务类型标识符 LAYERS:"3", //用","分隔的多个图层列表 ... //将WMS图层添加到地图上
百度、高德、腾讯、天地图、谷歌、必应等自定义地图/图片叠加层/瓦片图/金字塔图地图切图高清切片生成工具 MapCutter(旧名MapTiler) ,定位便捷,支持超大地图,支持leaflet、maptalks、openlayers、cesium、及...
Flutter Overlay、OverlayState、OverlayEntry 叠加 Toast Demo 叠加组件,可以悬浮在其他组件上边,我们通常使用他...虽然可以直接创建Overlay ,但最常见的是在WidgetsApp或MaterialApp中使用导航器创建的叠加层。
百度、高德、腾讯、天地图、谷歌、必应等自定义地图/图片叠加层/瓦片图/金字塔图地图切图高清切片生成工具 MapCutter https://blog.csdn.net/surfsky/article/details/106951716