百度地图自定义控件分享


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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
js仿360开机效果
Dec 26 Javascript
vue实现移动端返回顶部
Oct 12 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:风雨欲来 路在何方?
2006/10/09 PHP
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
php打开文件fopen函数的使用说明
2013/07/05 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
js中less常用的方法小结
2017/08/09 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
Python实现Linux命令xxd -i功能
2016/03/06 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
Python字典底层实现原理详解
2019/12/18 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
大学三年的自我评价
2013/12/25 职场文书