1.函数式编程

    //创建和初始化地图函数：

    function initMap(){

        createMap();//创建地图

        setMapEvent();//设置地图事件

        addMapControl();//向地图添加控件

    }

    //创建地图函数：

    function createMap(){

        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图

        var point = new BMap.Point(116.411024,39.910286);//定义一个中心点坐标

        map.centerAndZoom(point,13);//设定地图的中心点和坐标并将地图显示在地图容器中

        var marker = new BMap.Marker(point);  // 创建标注

        map.addOverlay(marker);               // 将标注添加到地图中

        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

        window.map = map;//将map变量存储在全局

    }

    //地图事件设置函数：

    function setMapEvent(){

        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)

        map.enableScrollWheelZoom();//启用地图滚轮放大缩小

        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)

        map.enableKeyboard();//启用键盘上下左右键移动地图

    }

    //地图控件添加函数：

    function addMapControl(){

        //向地图中添加缩放控件

        var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});

        map.addControl(ctrl_nav);

            //向地图中添加缩略图控件

        var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});

        map.addControl(ctrl_ove);

            //向地图中添加比例尺控件

        var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});

        map.addControl(ctrl_sca);

    }

    initMap();//创建和初始化地图

2.改造

function mapmark(lng, lat, zoom){

    this.lng = lng;

    this.lat = lat;

    this.zoom = zoom;

    this.initMap = function() {

        this.createMap();//创建地图

        this.setMapEvent();//设置地图事件

        this.addMapControl();//向地图添加控件

    };

    this.createMap = function() {

        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图

        var point = new BMap.Point(this.lng,this.lat);//定义一个中心点坐标

        map.centerAndZoom(point,this.zoom);//设定地图的中心点和坐标并将地图显示在地图容器中

        var marker = new BMap.Marker(point);  // 创建标注

        map.addOverlay(marker);               // 将标注添加到地图中

        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

        window.map = map;//将map变量存储在全局

    };

    this.setMapEvent = function() {

        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)

        map.enableScrollWheelZoom();//启用地图滚轮放大缩小

        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)

        map.enableKeyboard();//启用键盘上下左右键移动地图

    };

    this.addMapControl = function() {

        //向地图中添加缩放控件

        var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});

        map.addControl(ctrl_nav);

            //向地图中添加缩略图控件

        var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});

        map.addControl(ctrl_ove);

            //向地图中添加比例尺控件

        var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});

        map.addControl(ctrl_sca);

    };

}

调用

var mapmark = new mapmark(116.411024,39.910286,13);

mapmark.initMap();

完整html

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>百度地图</title>

<!--引用百度地图API-->

<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=2.0&ak=1We8imivxZnaKMujZIrlDZ0v"></script>

<script type="text/javascript" src="js/mapmark.js"></script>

</head>

<body>

  <!--百度地图容器-->

  <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>

</body>

<script type="text/javascript">

    var mapmark = new mapmark(116.411024,39.910286,13);

    mapmark.initMap();

</script>

</html>

效果

js构造函数式编程的更多相关文章

  1. Js中函数式编程的理解

    函数式编程的理解 函数式编程是一种编程范式,可以理解为是利用函数把运算过程封装起来,通过组合各种函数来计算结果.函数式编程与命令式编程最大的不同其实在于,函数式编程关心数据的映射,命令式编程关心解决问 ...

  2. js函数式编程(一)-纯函数

    我将写的第一个主题是js的函数式编程,这一系列都是mostly adequate guide这本书的读书总结.原书在gitbook上,有中文版.由于原作者性格活泼,书中夹杂很多俚语,并且行文洒脱.中文 ...

  3. 如何编写高质量的 JS 函数（3） --函数式编程[理论篇]

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/EWSqZuujHIRyx8Eb2SSidQ作者:杨昆 [编写高质量函数系列]中, <如何 ...

  4. 让JavaScript回归函数式编程的本质

    JavaScript是一门被误会最深的语言,这话一点不假,我们看下它的发展历史. 1995年,Netscape要推向市场,需要一门脚本语言来配套它.是使用一门已有的语言,还是发明一门新的语言,这也不是 ...

  5. JavaScript函数式编程究竟是什么?

    摘要: 理解函数式编程. 作者:前端小智 原文:JS中函数式编程基本原理简介 Fundebug经授权转载,版权归原作者所有. 在长时间学习和使用面向对象编程之后,咱们退一步来考虑系统复杂性. 在做了一 ...

  6. （转） 站在C#和JS的角度细谈函数式编程与闭包

    1.函数式编程是什么? 摘自百度的说法是.函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus).而且λ演算的函数可以接受函数当作输 ...

  7. 翻译连载 | 附录 A：Transducing（下）－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  8. 站在C#和JS的角度细谈函数式编程与闭包

    1.函数式编程是什么? 摘自百度的说法是.函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus).而且λ演算的函数可以接受函数当作输 ...

  9. 【JS】394- 简明 JavaScript 函数式编程-入门篇

    转载自公众号"程序员成长指北" 写在开头 本文较长,总共分为三大部分:(对于函数式编程以及其优点有一定理解的童鞋,可以直接从 第二部分 开始阅读) 第一部分:首先会通过实际代码介绍 ...

随机推荐

  1. Web性能压力测试工具之Siege详解

    PS:Siege是一款开源的压力测试工具,设计用于评估WEB应用在压力下的承受能力.可以根据配置对一个WEB站点进行多用户的并发访问,记录每个用户所有请求过程的相应时间,并在一定数量的并发访问下重复进 ...

  2. css3中的动画处理

    动画--过渡属性 div { width: 200px; height: 200px; background: red; margin: 20px auto; /* -webkit-transitio ...

  3. Redis 与 数据库处理数据的两种模式（转）

    Redis 是一个高性能的key-value数据库. redis的出现,很大程度补偿了memcached这类key-value存储的不足,在部 分场合可以对关系数据库起到很好的补充作用.它提供了Pyt ...

  4. laravel5.1关于lists函数的bug

    查询语句为: class DateAttrModel extends BaseModel{ -- static function getDays(--){ $days = self::lists('d ...

  5. 1056. Mice and Rice (25)

    时间限制 30 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Mice and Rice is the name of a pr ...

  6. PAT乙级真题1005. 继续(3n+1)猜想 (25)（解题）

    原题: 卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中遇到的每一个数.例如对n=3进行验证 ...

  7. 【 socke】C# socket端口复用-多主机头绑定

    什么是端口复用: 因为在winsock的实现中,对于服务器的绑定是可以多重绑定的,在确定多重绑定使用谁的时候,根据一条原则是谁的指定最明确则将包递交给谁,而且没有权限之分.这种多重绑定便称之为端口复用 ...

  8. 兼容IE，Firefox，Opera等浏览器的添加到收藏夹js代码实现

    function AddToFavorites() { var title = document.title; var url = location.href; if (window.sidebar) ...

  9. 制作滚动视图(ScrollView)

    怎样判断是否应当使用滚动视图 所谓的滚动视图,是指一个可以滑动的视窗,视窗大小和位置固定不变,视窗内的内容用户可以通过手指滑动或者拖动滚动天来进行滚动浏览. 滚动视图的目的是为了解决同类内容过多,一个 ...

  10. Unity3d之UGUI- Image拦截Button响应事件

    在编辑UI的时候Image放在Button前面就会挡掉button的响应 这种情况只需要为Image添加CanvasGroup組件 按照这个属性配置就不会挡掉后面的事件了