百度地图 >> 自定义控件
前言
百度地图API中预定义的UI控件,比如NavigationControl平移缩放控件,CopyrightControl版权控件,MapTypeControl地图类型控件....,这些都继承自抽象基类Control,因此均继承了Control的属性和方法,故如果我们需要自定义属于自己的控件就必须先继承Control.下面具体看下怎么自定义自己的控件?
步骤一
自定义控件的构造函数,在构造函数中指定控件的默认位置,自定义控件的构造函数,在构造函数中指定控件的默认位置,然后让新控件的prototype原型对象指向Control的对象以继承其原型链上的属性和方法。比如下边创建一个缩放级别的控件:
/自定义控件
function ZoomControl(){
this.defaultAnchor=BMAP_ANCHOR_TOP_LEFT;//设置控件默认位置
this.defaultOffset = new BMap.Size(60,30);//设置偏移
}
ZoomControl.prototype= new BMap.Control();//继承Control的属性和方法
步骤二
当通过addControl()方法添加自定义控件的时候,API会调用该对象从Control继承过来的initialize()方法用来初始化控件,所以要创建出你期望的UI控件,你就必须重写initialize()来构建出自定义控件的DOM和附上相应的DOM事件。由于自定义的控件的DOM最终会被添加到地图所在的DOM容器中去,所以首先我们需要调用getContainer()方法获得地图容器,然后将自定义的DOM附加到容器中.initialize()方法最终返回自定义控件容器的DOM元素.
// 自定义控件必须实现initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function(map){ // 创建一个DOM元素
var div = document.createElement("div"); // 添加文字说明
div.appendChild(document.createTextNode("放大2级"));
// 设置样式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
// 绑定事件,点击一次放大两级
div.onclick = function(e){
map.zoomTo(map.getZoom() + 2);
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
}
步骤三
自此自定义的一个单击地图放大2个级别的控件就写出来了,接下来就是使用,和地图API中定义的控件的使用方式相同.
/ 创建控件实例 var myZoomCtrl = new ZoomControl();
// 添加到地图当中 map.addControl(myZoomCtrl);
附图
百度地图 >> 自定义控件的更多相关文章
- 百度地图LV1.5实践项目开发工具类bmap.util.jsV1.3
/** * 百度地图使用工具类-v1.5 * * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @email b ...
- 百度地图LV1.5实践项目开发工具类bmap.util.jsV1.2
/** * 百度地图使用工具类-v1.5 * * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @email b ...
- 百度地图LV1.5实践项目开发工具类bmap.util.jsV1.1
/** * 百度地图使用工具类-v1.5 * * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @email b ...
- 百度地图LV1.5实践项目开发工具类bmap.util.jsV1.0
/** * 百度地图使用工具类-v1.5 * * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @email b ...
- 百度地图V2.0实践项目开发工具类bmap.util.js V1.4
/** * 百度地图使用工具类-v2.0(大眾版) * * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @em ...
- 百度地图API示例之添加自定义控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图api添加自定义控件
官网栗子:http://lbsyun.baidu.com/jsdemo.htm#b0_6 <!DOCTYPE html><html><head> <meta ...
- 百度地图 创建 自定义控件(vue)
1.组件代码 Bmap.vue <!-- 离线地图 组件 --> <template> <div id="map" :style="styl ...
- 百度地图api
引入js <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak ...
随机推荐
- BZOJ2252: [2010Beijing wc]矩阵距离
题解: 我脑子里都是翔??? bfs一下就行了 我居然还想什么kd tree!真是too naive,,, #include<cstdio> #include<cstdlib> ...
- 【C#学习笔记】自我复制
using System; using System.IO; using System.Diagnostics; namespace ConsoleApplication { class Progra ...
- (3)Spring定时任务的几种实现
Spring定时任务的几种实现 近日项目开发中需要执行一些定时任务,比如需要在每天凌晨时候,分析一次前一天的日志信息,借此机会整理了一下定时任务的几种实现方式,由于项目采用spring框架,所以我都将 ...
- 【Java】List的三种遍历方法
public void List_Test(){ List<String>list = new ArrayList<String>(); for(int i = 0;i < ...
- TCP/IP详解学习笔记(5)-IP选路,动态选路,和一些细节
1.静态IP选路 1.1.一个简单的路由表 选路是IP层最重要的一个功能之一.前面的部分已经简单的讲过路由器是通过何种规则来根据IP数据包的IP地址来选择路由.这里就不重复了.首先来看看一个简单的系统 ...
- GreenDao官方文档翻译(上)
笔记摘要: 上一篇博客简单介绍了SQLite和GreenDao的比较,后来说要详细介绍下GreenDao的使用,这里就贴出本人自己根据官网的文档进行翻译的文章,这里将所有的文档分成上下两部分翻译,只为 ...
- 组以逗号分隔的子串及跨平update join
下列语句可以对组以逗号分隔的子串 set @device_cd_array += ', ' set @device_cd_array += @nodeid ,, '') update时要join表要先 ...
- centos系统常用软件环境搭建
yum源制作grub常见问题:http://linux.chinaunix.net/techdoc/beginner/2008/01/04/975921.shtml 系统安装: 2 软件安装:yum ...
- 【转】一致性hash算法(consistent hashing)
consistent hashing 算法早在 1997 年就在论文 Consistent hashing and random trees 中被提出,目前在 cache 系统中应用越来越广泛: 1 ...
- 【Android】如何使用安卓的logcat『整理』
logcat是Android中一个命令行工具,可以用于得到程序的log信息.开发调试和测试定位bug都挺有用哒 有两种方式可以达到查看log的目的. 一 Eclipse集成DDMS插件 1 安装ecl ...