百度地图自定义控件分享


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 到 JQuery (1)学习小结
Feb 12 Javascript
Jquery 基础学习笔记
May 29 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
Vue开发Html5微信公众号的步骤
Apr 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
上海无线电三厂简史修改版
2021/03/01 无线电
PHP动态图像的创建
2006/10/09 PHP
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
HTML Dom与Css控制方法
2010/10/25 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
vue监听键盘事件的相关总结
2021/01/29 Vue.js
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
对python模块中多个类的用法详解
2019/01/10 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
Django静态文件加载失败解决方案
2020/08/26 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
安全事故检讨书
2014/01/18 职场文书
参观考察邀请函范文
2014/01/29 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
结婚保证书
2015/01/16 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers