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;
};

更多0

Google地图之OverlayView使用（自定义叠加层）的更多相关文章

  1. Google 地图 API V3 之 叠加层

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  2. 地图组件上的自定义区域叠加层显示 ArcGis + GeoJson

    最近参与了一个IOT环境项目,需要对某个城市的某几个区域做环境监控与治理,其中就用到了地图叠加层的功能,粗看很复杂,其实很简单,先来看一下效果,然后再来讲一下如何实现的: 中间的黄色轮廓线包括的几块区 ...

  3. ios 一步一步学会自定义地图吹出框(CalloutView)-->(百度地图，高德地图,google地图)

    前言 在 ios上边使用地图库的同学肯定遇到过这样的问题:吹出框只能设置title和subtitle和左右的view,不管是百度地图还是高德地图还是自带的 google地图,只提供了这四个属性,如果想 ...

  4. arcgis api 4.x for js 自定义叠加图片图层实现地图叠加图片展示（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  5. Google 地图 API V3 之事件

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  6. Google地图接口API之Google地图 API 参考手册(七)

    Google 地图API 参考手册 地图 构造函数/对象 描述 Map() 在指定的 HTML 容器中创建新的地图,该容器通常是一个DIV元素. 叠加层 构造函数/对象 描述 Marker 创建一个标 ...

  7. Google 地图 API V3 使用入门

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  8. Google 地图 API V3 针对移动设备进行开发

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  9. Google 地图 API V3 之控件

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

随机推荐

  1. poj 3041 Asteroids 题解

    Asteroids Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 20686   Accepted: 11239 Descr ...

  2. @JVM中对象的引用类型

    JVM中有四种引用类型:强引用.软引用.弱引用.虚引用   强引用(Stong Reference):是指在程序代码中普遍存在的,类似:Object obj = new Object()这类的引用,只 ...

  3. OTL使用指南

    1 OTL简介 OTL 是 Oracle, Odbcand DB2-CLI Template Library 的缩写,是一个C++编译中操控关系数据库的模板库,它目前几乎支持当前所有的各种主流数据库, ...

  4. go语言基础之同级目录

    1.同级目录 分文件编程(多个源文件),必须放在src目录 同一个目录,包名必须一样 设置GOPATH环境变量 go env 查看go相关环境路径 GO PATH: 在windows系统中,添加go环 ...

  5. App优化 Systrace

    简介 trace [tres] vt.跟踪,追踪; 追溯,探索; 探索; 查找; n.痕迹; 痕迹,踪迹; 微量,极少量; 1 1   1 trace [tres] vt.跟踪,追踪; 追溯,探索; ...

  6. Android -- 拷贝assets下的资源文件到SD卡中(可以超过1M)

    很多手机游戏,在安装APK之后都得需要下载相应的资源包,然后才能进入游戏. 有这样一个需求:就是游戏中需要的资源包打在APK内,随apk一起进行安装到手机中. 这样就不需要,在安装APK之后,去下载资 ...

  7. Carrer Day有感

    2013年10月17日 一.永不放弃,痼疾必须自己克服,否则永远有阴影. 二.若长期无法取得进展,应该换一种方式. 大Boss确实有水平,答到点子上且照顾到听众面子,强.很多话掷地有声,发人深省,比如 ...

  8. JavaScript 之 日常积累

    1. <a>标签"加入收藏",兼容IE,FireFox等 function bookmarksite() { if (window.sidebar) { // Mozi ...

  9. Java从零开始学零(Java简介)

    一.Java 简介 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称.由James Gosling和同事们共同研发,并在1995年 ...

  10. 用 Eclipse 插件提高代码质量

    如果能在构建代码前发现代码中潜在的问题会怎么样呢?很有趣的是,Eclipse 插件中就有这样的工具,比如 JDepend 和 CheckStyle,它们能帮您在软件问题暴露前发现这些问题.在 让开发自 ...