百度地图自定义控件分享


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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
vue中 this.$set的用法详解
Sep 06 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
Search Engine Friendly的URL设计
2006/10/09 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
javascript定义函数的方法
2010/12/06 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
JsChart组件使用详解
2018/03/04 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
Python获取apk文件URL地址实例
2013/11/01 Python
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
Django中的文件的上传的几种方式
2018/07/23 Python
Python中的Numpy矩阵操作
2018/08/12 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
韩国现代百货官网:Hmall
2018/03/21 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
岗位说明书标准范本
2014/07/30 职场文书
团队拓展活动总结
2014/08/27 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
标枪加油稿
2015/07/22 职场文书