百度地图自定义控件分享


Posted in Javascript onMarch 04, 2015

废话不多说了,直接奉上代码;

<script>

        var map = new BMap.Map('allmap');

        var Bcenter = new BMap.Point(116.404,39.915);

        map.centerAndZoom(Bcenter,11);

        //自定义控件

        function staticControl(){

            this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;

            this.defaultOffset = new BMap.Size(10,10);

        }

        //继承Control的API

        staticControl.prototype = new BMap.Control();

        //初始化控件

        staticControl.prototype.initialize=function(map){

            var div = document.createElement('div');

            var e1 = document.createElement('input');

            e1.type = 'button';

            e1.value = '重置';

            e1.onclick=function(){

                statics();

            }

            div.appendChild(e1);

            var e2=document.createElement('input');

            e2.type = 'button';

            e2.value = '缩小';

            e2.onclick=function(){

                endStatics();

            }

            div.appendChild(e2);

            var e3 = document.createElement("input");

            e3.type = "button";

            e3.value = "放大";

            e3.onclick = function () {

               setStatics();

            }

            div.appendChild(e3);

            //添加DOM元素到地图中

            map.getContainer().appendChild(div);

            //返回DOM

            return div;

        }

        //创建控件实例

        var staticsCtrl = new staticControl();

        //添加到地图当中

        map.addControl(staticsCtrl);

        function statics(){

            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

        }

        function endStatics(){

            map.setZoom(map.getZoom()-2);

        }

        function setStatics(){

            map.setZoom(map.getZoom()+2)

        }

    </script>

上面代码就是个人正在使用的百度地图的自定义控件,希望大家能够喜欢。

Javascript 相关文章推荐
基于jQuery替换table中的内容并显示进度条的代码
Aug 02 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
jQuery取id有.的值的方法
May 21 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 #Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 #Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 #Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 #Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 #Javascript
jQuery插件开发的五种形态小结
Mar 04 #Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 #Javascript
You might like
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
PHPCMS的使用小结
2010/09/20 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
Laravel 队列使用的实现
2019/01/08 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
解javascript 混淆加密收藏
2009/01/16 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
Python简单基础小程序的实例代码
2019/04/28 Python
Python控制Firefox方法总结
2019/06/03 Python
python操作excel让工作自动化
2019/08/09 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
介绍一下linux的文件权限
2012/02/15 面试题
学生干部的自我评价分享
2014/01/18 职场文书
商务考察邀请函范文
2014/01/21 职场文书
员工合理化建议书
2014/05/19 职场文书
经营理念口号
2014/06/21 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
比较node.js和Deno
2021/04/27 Javascript
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript