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. 弹性布局学习-详解 justify-content(三)

    弹性布局学习-详解 justify-content(三)

  2. Linux编程学习笔记 -- Process

    进程是一个程序的运行.   在一个程序中执行另一个执程序的方法有两种: 1)system 在shell中执行程序 2)fork + exec 复制一个进程,在进程中用新的程序替换原有的程序   for ...

  3. Java 类和对象

    主要参考文献:王映龙<Java程序设计> 一:类的语法 [修饰符]class<类名>[extends父类名][implements接口列表]{ //类体} 1:修饰符 可选值为 ...

  4. 【转】O'Reilly Java系列书籍建议阅读顺序（转自蔡学庸）

    Learning Java the O'Reilly's Way (Part I) Java 技术可以说是越来越重要了,不但可以用在计算机上,甚至连电视等家电用品,行动电话.个人数字助理(PDA)等电 ...

  5. .net google calendar

    https://developers.google.com/gdata/client-cs http://www.codeproject.com/Articles/64474/How-to-Read- ...

  6. javascript面向对象思想2

    上篇说到面向对象可以帮我们梳理页面的逻辑的文章(http://www.cnblogs.com/hetaojs/p/6024013.html),很多朋友看了说我这种写法是初级的面向对象小儿科,确实是初级 ...

  7. jquery easyui无法绑定下拉框内容

    最近在研究jquery easyui的DataGrid,发现DataGrid中的下拉框无法绑定值,找了很久也没发现是具体问题所在,最后还是同事帮忙搞定的.具体问题竟然是jquery easyui提供的 ...

  8. csu 1305 Substring （后缀数组）

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1305 1305: Substring Time Limit: 2 Sec  Memory Limi ...

  9. 利用开源项目使discus论坛与java应用同步登录和注册

    最近做了一个资源库系统的项目,老师说可以搭建开源论坛替代自己开发社交模块(评论啊,反馈啊)来减轻负担,甚至提到了要给每个资源开一帖的功能..使我十分怀疑到底是减轻负担还是增加负担...不过怀疑归怀疑, ...

  10. 使用Pod集成Bugtags填坑记

    最近某朋友的朋友的创业公司新出了一个工具叫Bugtags,说是可以让APP测试变得so easy,于是动手来做1.1.0的版本集成,先把WEB首页贴在下面,感兴趣的同学可以去look一下:https: ...