百度地图自定义控件分享


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 相关文章推荐
克隆javascript对象的三个方法小结
Jan 12 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
Json解析的方法小结
Jun 22 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
Vue router安装及使用方法解析
Dec 02 Vue.js
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
PHP4实际应用经验篇(4)
2006/10/09 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
javascript第一课
2007/02/27 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
理解javascript正则表达式
2016/03/08 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
python异步任务队列示例
2014/04/01 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
python中的变量如何开辟内存
2018/06/26 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
银行财务部实习生的自我鉴定
2013/11/27 职场文书
商务英语应届生自我鉴定
2013/12/08 职场文书
党员自我评价分享
2013/12/13 职场文书
家长通知书家长评语
2014/04/17 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
python常见的占位符总结及用法
2021/07/02 Python
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android