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. HDU 4462 DFS

    2012 Asia Hangzhou Regional Contest 给出N*N的矩阵,所有标记为0,当中有K个点标记为1.而且能够在该位置放置一个能够覆盖曼哈顿距离为r的草人.问最少放置几个草人, ...

  2. Java:IO流的综合用法(从键盘录入数据并打印在控制台上)

    import java.io.*; public class IOTestDouble { public static void main(String[] args)throws Exception ...

  3. WhyDX9:翻写D3D红龙书中的程序

    之前写过一套学习OpenGL的框架:WhyGL,即然有了GL那也应该再写个学习D3D的框架:WhyDX9.两个程序的架构相同,然后这个程序是将D3D红龙那本书的DEMO翻写了一遍.先将可执行程序发一下 ...

  4. linux C 多线程/线程池编程 同步实例

    在多线程.线程池编程中经常会遇到同步的问题. 1.创建线程 函数原型:int pthread_create(pthread_t *thread, const pthread_attr_t *attr, ...

  5. Windows Server上iSCSI的Best Practices

    Installing and Configuring Microsoft iSCSI Initiator http://technet.microsoft.com/en-us/library/ee33 ...

  6. 运用CSS改进网站设计的3个技巧

    CSS是一种分离表述编码和实际内容的一种最有用的方式,也是一种使搜索引擎最优化的方式,通常,网站设计中会建立一整套的css样式标准,这些标准存储在一个扩展名为css的单独文件中.然后利用HTML标签设 ...

  7. Windows10下安装pytorch并导入pycharm

    1.安装Anaconda 下载:https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 安装Anaconda3,最新版本的就可以了,我安装的是5. ...

  8. ListView 设置列对齐方式

    <ListView.Resources> <Style TargetType="ListViewItem"> <Setter Property=&qu ...

  9. 图像数据到网格数据-1——MarchingCubes算法

    原文:http://blog.csdn.net/u013339596/article/details/19167907 概述 之前的博文已经完整的介绍了三维图像数据和三角形网格数据.在实际应用中,利用 ...

  10. easyui form validate总是返回false原因

    最近做表单验证用了easyui form组件.又一次发现在测试表单都填写正确了但是调试表单的代码监测到调用form的"validate"方法总是返回false 最后查了一下原因在h ...