百度自定义地图控件
来源:互联网 发布:mysql 最小值 编辑:程序博客网 时间:2024/05/01 12:54
百度地图API详解之自定义地图控件
本文向大家介绍关于自定义地图控件的知识,你将了解到如何通过百度地图API自定义自己的地图控件。
控件基础
控件是地图API提供的供用户操作地图的界面元素,API内置了几个控件:缩放/平移控件(NavigationControl)、缩略图控件(OverviewMapControl)、比例尺控件(ScaleControl)、版权控件(CopyrightControl)和地图类型控件(MapTypeControl)。通过下面的图示可以找到对应关系。
控件位置
任何控件都可以停靠在地图的四个角落,并通过偏移值(offset)控制具体位置,停靠位置(API中叫做anchor)通过以下4个常量控制:
- BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。
- BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。
- BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。
- BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。
自定义控件
控件本质上是HTML片段加上一些DOM事件的响应,进而再操作地图。所以编写自定义控件就是需要开发者自行编写HTML代码并添加自己的事件处理方法,方法中再调用地图API提供的接口来改变地图状态。
在百度地图API中自定义控件的编写需要以下几个步骤:
- 定义一个自定义控件的构造函数,提供defaultAnchor和defaultOffset属性。
- 继承API的控件基类。
- 实现initialize方法。
下面我们就来完成一个最简单的自定义控件,以便让您了解构建自定义控件的完整过程是什么样的。
定义构造函数
我们定义一个function做为自定义控件的构造函数,并在其中提供了默认停靠位置和偏移量。注意它们取值的类型:一个是ControlAnchors常量,一个是Size类。
// 定义一个控件类,即function function ZoomControl(){ // 设置默认停靠位置和偏移量 this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; this.defaultOffset = new BMap.Size(10, 10);}
继承
通过函数对象的prototype实现继承(希望您已经了解了JavaScript中的继承机制)。继承后控件将会带有Control类的所有方法,您可以隐藏、显示控件,设置控件的停靠位置和偏移量。
// 通过JavaScript的prototype属性继承于BMap.Control ZoomControl.prototype = new BMap.Control();
实现initialize方法
当调用Map的addControl方法时,实际上API会调用控件实例的initialize方法,这里您需要创建控件的DOM元素并绑定事件,并把这个DOM对象添加到地图容器上(这个地图容器就是在初始化地图时提供的容器元素,可通过Map的getContainer方法获得)。注意,这个方法需要将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; }
添加控件到地图
添加自定义控件和添加内置控件过程一样:
// 创建控件实例 var myZoomCtrl = new ZoomControl(); // 添加到地图当中 map.addControl(myZoomCtrl);
我们会在地图中看到自己的控件了:
通过firebug我们可以看到自定义控件的DOM元素被放入在地图容器之中,作为它的一个子元素:
最后我们用一个完整的流程图来描述添加自定义控件的过程:
在了解自定义控件的机制后相信开发者会根据需求开发自己的地图控件。
- 百度自定义地图控件
- 百度地图自定义控件
- 百度地图API自定义缩放控件
- 百度地图API详解之自定义地图控件
- 百度地图JS版API自定义覆盖物和控件
- 百度地图API制作自定义的放大缩小控件ZoomControlView
- H5+百度地图自定义定位控件、调用H5+定位接口
- 百度地图自定义搜索框控件,并添加事件
- Android 百度地图自定义marker 控件点击无效问题解决方法。
- 百度地图API自定义地图
- iOS百度地图自定义
- 百度地图自定义Markers
- 百度地图自定义边界
- 百度地图自定义大头针
- 百度地图自定义气泡
- 百度地图自定义气泡
- 百度地图,自定义Marker
- 百度自定义API地图
- mac下移动硬盘不能往里边拷贝东西的解决办法
- UNIX网络编程——套接字选项(SO_REUSEADDR)
- C++一维数组和指针的关系总结
- jQuery Ajax全解析
- 【Oracle】-【体系结构-LGWR】-LGWR的一些理解
- 百度自定义地图控件
- Struts2中field级别错误导致action无法使用的问题
- NOJ 212题K尾相等数
- TortoiseSVN 打开出现“系统找不到指定的路径”
- 渗透课程笔记
- Win 7重装小记
- java中提高时间性能的一些措施
- [小说]魔王冢(13)吕四娘
- hdu3460(字典树)