百度地图自定义控件分享


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 CSS修改学习第三章 修改样式表
Feb 19 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
浅谈Javascript中的对象和继承
Apr 19 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
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
JavaScript Split()方法
2015/12/18 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
js实现时钟定时器
2020/03/26 Javascript
python 从远程服务器下载东西的代码
2013/02/10 Python
python类型强制转换long to int的代码
2013/02/10 Python
Python程序设计入门(5)类的使用简介
2014/06/16 Python
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
python八皇后问题的解决方法
2018/09/27 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
Python中的self用法详解
2019/08/06 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
详细分析Python垃圾回收机制
2020/07/01 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
幼儿园保教管理制度
2014/02/03 职场文书
会计人员岗位职责
2014/03/19 职场文书
小组组名及励志口号
2015/12/24 职场文书
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS