百度地图自定义控件分享

 更新时间:2015年03月04日 09:25:06   投稿:hebedich  
本文给大家介绍的是如何使用百度地图的自定义控件,附上示例,分享给大家,小伙伴们根据自己的需求稍微改动下即可使用。

废话不多说了,直接奉上代码;

复制代码 代码如下:

<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完美拖拽的实现方法

    这篇文章介绍了javascript完美拖拽的实现方法,有需要的朋友可以参考一下
    2013-09-09
  • Javascript中click与blur事件的顺序详析

    Javascript中click与blur事件的顺序详析

    这篇文章主要给大家介绍了关于Javascript中click与blur事件顺序的相关资料,文中介绍的非常详细,对大家学习或者使用Javascript中的click与blur事件具有一定的参考学习价值,需要的朋友可以下面来一起看看吧。
    2017-04-04
  • 微信小程序使用map组件实现解析经纬度功能示例

    微信小程序使用map组件实现解析经纬度功能示例

    这篇文章主要介绍了微信小程序使用map组件实现解析经纬度功能,涉及微信小程序map组件结合高德地图进行经纬度获取相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • 微信小程序 如何获取网络状态

    微信小程序 如何获取网络状态

    这篇文章主要介绍了微信小程序 如何获取网络状态,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • 如何检测JavaScript中的死循环示例详解

    如何检测JavaScript中的死循环示例详解

    这篇文章主要给大家介绍了关于如何检测JavaScript中死循环的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • js获取当前时间显示在页面上并每秒刷新

    js获取当前时间显示在页面上并每秒刷新

    这篇文章主要介绍了js获取当前时间显示在页面上并每秒刷新,需要的朋友可以参考下
    2014-12-12
  • 详解微信小程序回到顶部的两种方式

    详解微信小程序回到顶部的两种方式

    这篇文章主要介绍了详解微信小程序回到顶部的两种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JS实现的视频弹幕效果示例

    JS实现的视频弹幕效果示例

    这篇文章主要介绍了JS实现的视频弹幕效果,涉及javascript基于事件响应的页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-08-08
  • JavaScript数组实现扁平化四种方法详解

    JavaScript数组实现扁平化四种方法详解

    扁平化,顾名思义就是减少复杂性装饰,使其事物本身更简洁、简单,突出主题。数组扁平化,对着上面意思套也知道了,就是将一个复杂的嵌套多层的数组,一层一层的转化为层级较少或者只有一层的数组
    2022-10-10
  • js设置cookie过期及清除浏览器对应名称的cookie

    js设置cookie过期及清除浏览器对应名称的cookie

    js设置cookie过期也就相当于清除浏览器对应名称的cookie,下面有个不错的示例,感兴趣的朋友可以参考下
    2013-10-10

最新评论