百度map >> 自定义控件

查询谷 - www.chaxungu.com

编辑：chaxungu时间：2022-10-10 23:23:40分类：web开发

百度地图 >> 自定义控件

前言

百度地图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的属性和方法View Code

步骤二

当通过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; }View Code

步骤三

自此自定义的一个单击地图放大2个级别的控件就写出来了，接下来就是使用，和地图API中定义的控件的使用方式相同.

/ 创建控件实例 var myZoomCtrl = new ZoomControl();// 添加到地图当中 map.addControl(myZoomCtrl); View Code

附图

上一篇：php-app接口实现（json跟xml）

下一篇：上传图片预览,该如何处理

查询谷 - www.chaxungu.com

百度map >> 自定义控件

最新文章