百度地图自定义控件分享


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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
java必学必会之static关键字
Dec 03 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
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使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
Python autoescape标签用法解析
2020/01/17 Python
python with (as)语句实例详解
2020/02/04 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
采用怎样的方法保证数据的完整性
2013/12/02 面试题
环保倡议书
2014/04/14 职场文书
个性车贴标语
2014/06/24 职场文书
三八活动策划方案
2014/08/17 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
婚礼父母答谢词
2015/01/04 职场文书
感谢信的格式
2015/01/21 职场文书
民事代理词范文
2015/05/25 职场文书
培训简讯范文
2015/07/20 职场文书
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL