原文:【百度地图API】建立全国银行位置查询系统（二）——怎样为地图添加控件

<摘要>你将在第二章中学会以下知识：

  1. 使用手写代码的利器——notepad++；
  2. 如何为地图添加控件——鱼骨、鹰眼、比例尺、2D3D转换控件、版权控件。

-----------------------------------------------------------------------------------------------------------------

一、安装配置notepad++

为什么要使用notepad++？不会产生WYSIWYG编辑器那样的多余代码，培养良好的手写代码习惯。代码可折叠，且以不同颜色来区分，让代码阅读起来更容易。

1、下载安装

　　在百度上搜索“notepad++”，即可下载。下载完毕按指示安装。

2、如何配置tab

　　运行notepad++，在顶部选择“设置”->“首选项”->“语言”，将右下角的标签尺寸改为“4”。意思是1个tab代表4个空格。（如有疑问请留言）

---------------------------------------------------------------------------------------------------------------------

二、如何在地图上添加各种控件？

首先，我们来了解一下，百度API到底提供哪些控件呢？

查看API首页->类参考->控件类，我们会发现如下控件类：鱼骨、鹰眼、比例尺、2D3D转换控件、版权控件。

---------------------------------------------------------------------------------------------------------------------

1、鹰眼，又称缩略图控件——OverviewMapControl

map.addControl(new BMap.OverviewMapControl());      //为地图添加鹰眼控件

如上图，左边为关闭（默认）；右边为开启。

鹰眼默认为关闭状态，可以利用{isOpen:1}属性，使它开启。

map.addControl(new BMap.OverviewMapControl({isOpen:}));      //开启鹰眼

同时，我们还可以利用anchor属性，改变控件的位置。一共有四个位置可以选择，分别是：

  • BMAP_ANCHOR_TOP_LEFT  左上
  • BMAP_ANCHOR_TOP_RIGHT 右上
  • BMAP_ANCHOR_BOTTOM_LEFT 左下
  • BMAP_ANCHOR_BOTTOM_RIGHT 右下
map.addControl(new BMap.OverviewMapControl({isOpen: , anchor: BMAP_ANCHOR_TOP_RIGHT}));      //开启鹰眼，位置在右上方

点击这里运行代码（鹰眼，开启状态，位置右上角）

---------------------------------------------------------------------------------------------------------------------

2、鱼骨，别名地图平移缩放控件——NavigationControl

map.addControl(new BMap.NavigationControl());      //为地图添加鱼骨（默认）

鱼骨有4种模式：

  • BMAP_NAVIGATION_CONTROL_LARGE 表示显示完整的平移缩放控件。（默认）
  • BMAP_NAVIGATION_CONTROL_SMALL 表示显示小型的平移缩放控件。
  • BMAP_NAVIGATION_CONTROL_PAN 表示只显示控件的平移部分功能。
  • BMAP_NAVIGATION_CONTROL_ZOOM 表示只显示控件的缩放部分功能。

现在，我们去掉刚才的默认鱼骨，换上一个迷你鱼骨。

你只需要在刚才的代码上，加上迷你鱼骨的类型即可。如下：

map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));      //为地图添加鱼骨（迷你型）

点击这里运行代码（迷你鱼骨）。

---------------------------------------------------------------------------------------------------------------------

3、比例尺控件——ScaleControl

map.addControl(new BMap.ScaleControl());      //为地图添加比例尺

由于百度API是免费的，百度要求使用百度API开发的地图，必须使用带上百度的logo。

但有时候这个logo挺“碍事儿”的，经常会挡住比例尺。怎么办呢？我们又不能去掉这个logo。

因此，我们需要利用offset来规定控件的偏移。

offset: new BMap.Size(5,40) 表示，距离左下角的原点，偏移X=5，Y=40像素的位置。

map.addControl(new BMap.ScaleControl({offset: new BMap.Size(, )}));      //添加一个带上偏移量的比例尺

点击这里运行代码。（偏移后的比例尺）

---------------------------------------------------------------------------------------------------------------------

4、2D3D切换控件，又叫做地图类型控件——MapTypeControl

只要使用3D地图，都需要设置当前城市位置。

目前，只支持北上广深四个城市的3D地图显示。

map.addControl(new BMap.MapTypeControl());      //为地图添加2D3D切换控件map.setCurrentCity("北京");   // 仅当设置城市信息时，MapTypeControl的切换功能才能可用

点击这里运行代码。（3D图控件）

---------------------------------------------------------------------------------------------------------------------

5、版权控件——CopyrightControl

版权信息的属性中，id为数字，必须写一个。

content里面的格式可以是html的，这样就可以加图片，或者超链接了。

var myCopyright = new BMap.CopyrightControl({offset: new BMap.Size(, )});   //设置版权信息偏移量map.addControl(myCopyright);      //为地图添加版权控件        myCopyright.addCopyright({id : , content : '<a href="htp://www.ui-love.com">我是版权信息哦</a>'});

---------------------------------------------------------------------------------------------------------------------

运行全部代码，请点击这里。（控件安装完毕，包括：鹰眼、鱼骨、比例尺、3D控件、版权信息）

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>酸奶小妹——百度地图API学习</title>    <style type="text/css">        html{height:100%}        body{height:100%;margin:0px;padding:0px}        #milkMap{height:400px;width:600px;border:1px solid blue;}    </style>    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=false"></script></head><body>    <div id="milkMap"></div></body><script type="text/javascript">    var map = new BMap.Map("milkMap");          // 创建地图实例    var point = new BMap.Point(116.404, 39.915);  // 创建点坐标    map.centerAndZoom(point, 16);                 // 初始化地图，设置中心点坐标和地图级别        map.addControl(new BMap.OverviewMapControl({isOpen:1}));      //为地图添加鹰眼        //map.addControl(new BMap.NavigationControl());      //为地图添加鱼骨（默认）    map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));      //为地图添加鱼骨（迷你型）        //map.addControl(new BMap.ScaleControl());      //添加一个带上偏移量的比例尺        map.addControl(new BMap.ScaleControl({offset: new BMap.Size(5, 40)}));      //添加一个带上偏移量的比例尺            map.addControl(new BMap.MapTypeControl());      //为地图添加2D3D切换控件    map.setCurrentCity("北京");   // 仅当设置城市信息时，MapTypeControl的切换功能才能可用            var myCopyright = new BMap.CopyrightControl({offset: new BMap.Size(82, 0)})   //设置版权信息偏移量    map.addControl(myCopyright);      //为地图添加版权控件            myCopyright.addCopyright({id : 1, content : '<a style="line-height:30px;height:30px;display:block;color:red;background:yellow" href="http://www.cnblogs.com/milkmap/"><img src="http://www.ui-love.com/static/img/uiico.ico" />酸奶小妹的博客园</a>'});</script></html>

---------------------------------------------------------------------------------------------------------------------

复习要点：

  1. 控件有4个位置可以摆放，利用anchor属性；
  2. 控件还可以设置偏移量，做位置的调整，需要用到offset属性；
  3. 鹰眼可以设定开启，和关闭的状态，用到isOpen属性；
  4. 鱼骨有四种模式可以选择，使用type属性；
  5. 版权信息是可以写入html的，使用版权必须写入id属性。

---------------------------------------------------------------------------------------------------------------------

小知识：

　　你知道比例尺的一像素对应的是几米麼？

答案：

Math.pow(, ( - zoom));   //把地图级别带进去，就能得出各个级别下1px对应多少米

【百度地图API】建立全国银行位置查询系统（二）——怎样为地图添加控件的更多相关文章

  1. 【百度地图API】建立全国银行位置查询系统（五）——如何更改百度地图的信息窗口内容？

    原文:[百度地图API]建立全国银行位置查询系统(五)--如何更改百度地图的信息窗口内容? 摘要: 酷讯.搜房.去哪儿网等大型房产.旅游酒店网站,用的是百度的数据库,却显示了自定义的信息窗口内容,这是 ...

  2. 【百度地图API】建立全国银行位置查询系统（四）——如何利用百度地图的数据生成自己的标注

    原文:[百度地图API]建立全国银行位置查询系统(四)--如何利用百度地图的数据生成自己的标注 摘要: 上一章留个悬念,"如果自己没有地理坐标的数据库,应该怎样制作银行的分布地图呢?&quo ...

  3. 【百度地图API】建立全国银行位置查询系统（三）——如何在地图上添加银行标注

    原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo, ...

  4. 【百度地图API】建立全国银行位置查询系统（一）——如何创建地图

    原文:[百度地图API]建立全国银行位置查询系统(一)--如何创建地图 <摘要>你将在第一章中学会以下知识: 如何创建一个网页文件 怎样利用百度地图API建立一张2D地图,以及3D地图 如 ...

  5. 百度地图API，展示地图和添加控件

    1.申请百度账号和AK 点我申请 2.准备页面 根据HTML标准,每一份HTML文档都应该声明正确的文档类型,我们建议您使用最新的符合HTML5规范的文档声明: <!DOCTYPE html&g ...

  6. 【高德地图API】一句话搞定webmap（一）——轻地图组件

    原文:[高德地图API]一句话搞定webmap(一)——轻地图组件 摘要: 遥想当年,在APP中加入LBS元素相当困难:要刻苦学习java,要刻苦学习iOS开发,要刻苦学习javascript…… 而 ...

  7. WordPress使用淘宝IP地址库的API显示评论者的位置信息（二）

    1 淘宝IP地址库的接口说明 在上一篇文章<WordPress使用淘宝IP地址库的API显示评论者的位置信息(一)>中,vfhky使用了新浪工具提供的这个IP接口显示博客评论者的位置信息. ...

  8. Android应用中使用百度地图API定位自己的位置（二）

    官方文档:http://developer.baidu.com/map/sdkandev-6.htm#.E7.AE.80.E4.BB.8B3 百度地图SDK为开发人员们提供了例如以下类型的地图覆盖物: ...

  9. 玩转百度地图API（地图,坐标,标记,添加控件,2D图,混合图,智能搜索,地址解析器,信息窗口)

    1.注册得到appkey 2.直接上代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...

随机推荐

  1. RH033读书笔记(10)-Lab 11 Process Control

    Lab 11 Process Control Sequence 1: Job Control 1. [student@stationX ~]$ su - 2. Begin some jobs in t ...

  2. 你听说过XML吗？

    我们每天都会见到各种各样的书,今天我们就来谈一谈有关书籍带给我们学习的启发. 正如上图所看到的,不同的书籍有不同的外观,比如教科书.儿童图书等:而且书也不是随便能够出版的,要有自己文档结构,语义规则. ...

  3. STL内存分配

    STL内存创建 Owed by: 春夜喜雨 http://blog.csdn.net/chunyexiyu  转载请标明来源 1.      Stl内存创建基类模板__malloc_alloc_tem ...

  4. Android - 分享内容 - 添加一个简单的分享操作

    在ActionBar上使用ActionProvider实现一个高效的友好的分享操作在Android 4.0(API等级14)上更容易了.一个ActionProvider,一旦附加到action bar ...

  5. NLP | 自然语言处理 - 解析（Parsing, and Context-Free Grammars）

    什么是解析? 在自然语言的学习过程,个人一定都学过语法,比如句子能够用主语.谓语.宾语来表示.在自然语言的处理过程中.有很多应用场景都须要考虑句子的语法,因此研究语法解析变得很重要. 语法解析有两个基 ...

  6. FreeMarker整合Spring 3（转）

    开发环境: System:Windows WebBrowser:IE6+.Firefox3+ JavaEE Server:tomcat5.0.2.8.tomcat6 IDE:eclipse.MyEcl ...

  7. 深入了解C++中间mutablekeyword

         深入理解C++中的mutablekeyword kezunhai@gmail.com http://blog.csdn.net/kezunhai keywordmutable是C++中一个不 ...

  8. 四、Linux/UNIX操作命令积累【chmod、chown、tail】

    正在使用Linux/UNIX下一个.经常使用文本界面来设置系统或操作系统,笔者也是在指挥这方面工作的过程中不断的接触.因此,为了此特酝酿.准备.開始了本文的编写.本文主要记录自己平时遇到的一些Linu ...

  9. AndroidUI组件之TabHost

    package com.gc.tabhost; /** * @author Android将军 * * * * 1.TabHost是一种非常有用的组件,TabHost能够非常方便地在窗体上放置 * 多 ...

  10. （一个）AngularJS获取贴纸Hello World

    一旦项目使用JQuery原创javascript,最近参加了一个项目,需要使用AngularJS.RequireJS比较框架,如汰渍.这里写一些博客,记录自己的学习过程,虽然冠以原来的名字,实际上都是 ...