百度地图自定义控件分享


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 相关文章推荐
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 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 常用的header头部定义汇总
2015/06/19 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
vue 实现全选全不选的示例代码
2018/03/29 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
Django实现网页分页功能
2019/10/31 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
python模拟斗地主发牌
2020/04/22 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
制药工程专业毕业生推荐信
2013/12/24 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
总账会计岗位职责
2014/03/13 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
医院节能减排方案
2014/06/13 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
会计工作能力自我评价
2015/03/05 职场文书
土建施工员岗位职责
2015/04/11 职场文书
初中历史教学反思
2016/02/19 职场文书