百度地图自定义控件分享


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 相关文章推荐
Js中sort()方法的用法
Nov 04 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
vue实现购物车结算功能
Jun 18 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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根据数据id自动生成编号的实现方法
2016/10/16 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
浅析Ajax语法
2016/12/05 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
盘点提高 Python 代码效率的方法
2014/07/03 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
详解爬虫被封的问题
2019/04/23 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
Python文件操作方法详解
2020/02/09 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
澳大利亚网上书店:QBD
2021/01/09 全球购物
小学感恩节活动总结
2015/03/24 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS