Google地图之OverlayView使用（自定义叠加层）
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" ></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地图之OverlayView使用（自定义叠加层）的更多相关文章
- Google 地图 API V3 之 叠加层
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- 地图组件上的自定义区域叠加层显示 ArcGis + GeoJson
最近参与了一个IOT环境项目,需要对某个城市的某几个区域做环境监控与治理,其中就用到了地图叠加层的功能,粗看很复杂,其实很简单,先来看一下效果,然后再来讲一下如何实现的: 中间的黄色轮廓线包括的几块区 ...
- ios 一步一步学会自定义地图吹出框(CalloutView)-->(百度地图，高德地图,google地图)
前言 在 ios上边使用地图库的同学肯定遇到过这样的问题:吹出框只能设置title和subtitle和左右的view,不管是百度地图还是高德地图还是自带的 google地图,只提供了这四个属性,如果想 ...
- arcgis api 4.x for js 自定义叠加图片图层实现地图叠加图片展示（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
- Google 地图 API V3 之事件
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- Google地图接口API之Google地图 API 参考手册(七)
Google 地图API 参考手册 地图 构造函数/对象 描述 Map() 在指定的 HTML 容器中创建新的地图,该容器通常是一个DIV元素. 叠加层 构造函数/对象 描述 Marker 创建一个标 ...
- Google 地图 API V3 使用入门
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- Google 地图 API V3 针对移动设备进行开发
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- Google 地图 API V3 之控件
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
随机推荐
- Spring 事务模板
最近项目开发中需要用到单机事务,因为项目中使用了Spring和Mybatis框架,所以通过Spring来进行事务的管理,并且记录一下事务配置的过程 第一步:配置DataSource <!-- 发 ...
- Objective-C-Category类别
Object-C开发的时候有的时候会用到Category类,类似于Java和C#中扩展类,就是如果你觉得如果你觉得常用的方法在String中没有,可以根据业务需求和个人喜好写一个扩展类,然后在其中补充 ...
- 一款超炫的jquery图片播放插件[Cloud Carousel]
今天给大家介绍一个jquery图片播放插件,也可以说是一款幻灯片放映插件,它叫Cloud Carousel,支持自动播放.图片预览.鼠标滚轮滚动,非常酷,下图是效果预览. 该jquery图片播放项目演 ...
- android 百度地图demo 随感
最近项目组的老大要我对百度的android的sdk进行一段的预研,由于技术太菜,出了不少的错误,因此有一点感悟了. 嗨,这个错误浪费了我一天的时间的时候,我按照百度的技术文档一步步的来做,每部基本上都 ...
- GoLang中 json、map、struct 之间的相互转化
1. golang 中 json 转 struct <1. 使用 json.Unmarshal 时,结构体的每一项必须是导出项(import field).也就是说结构体的 key 对应的首字母 ...
- HTML-<td> 标签的 valign 属性
<html> <body> <table border="1" style="height:200px"> <tr&g ...
- [转]How to query posts filtered by custom field values
Description It is often necessary to query the database for a list of posts based on a custom field ...
- mysql时间操作函数和存储过程
因为业务须要统计一批数据.用到关于mysql的时间操作函数和存储过程,问题已经基本解决.把过程记录下: 1. mysql的语句中不支持直接用循环.循环仅仅能在存储过程中使用. 2. 写为文件时,注意一 ...
- Android Environment.getExternalStorageDirectory() 获取的是内部存储还是外部存储？
这几天在做Android应用的远程更新功能,将下载的更新包放在移动设备上指定的文件夹. 用的是 Environment.getExternalStorageDirectory() 这种方法.然后在获 ...
- Office安装错误1402的解决
Office软件是我们工作是必备的,为了统一公司的办工软件,要把所有的WPS和Office2003版本全部换顾Office2010.在Win7下安装Office2010一般都不会存在什么大的问题,但遇 ...