百度地图自定义控件分享


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 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
jquery提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
js 效率组装字符串 StringBuffer
Dec 23 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
微信小程序canvas实现签名功能
Jan 19 Javascript
JavaScript实现复选框全选功能
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
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
Javascript 类型转换方法
2010/10/24 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
基于vue实现分页效果
2017/11/06 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
python+requests接口自动化框架的实现
2020/08/31 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
出国导师推荐信
2014/01/16 职场文书
劲霸男装广告词
2014/03/21 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
论群众路线学习笔记
2014/11/06 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
导游词之青岛崂山
2019/12/27 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python