【百度地图API】建立全国银行位置查询系统(二)——怎样为地图添加控件
原文:【百度地图API】建立全国银行位置查询系统(二)——怎样为地图添加控件
<摘要>你将在第二章中学会以下知识:
- 使用手写代码的利器——notepad++;
- 如何为地图添加控件——鱼骨、鹰眼、比例尺、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>
---------------------------------------------------------------------------------------------------------------------
复习要点:
- 控件有4个位置可以摆放,利用anchor属性;
- 控件还可以设置偏移量,做位置的调整,需要用到offset属性;
- 鹰眼可以设定开启,和关闭的状态,用到isOpen属性;
- 鱼骨有四种模式可以选择,使用type属性;
- 版权信息是可以写入html的,使用版权必须写入id属性。
---------------------------------------------------------------------------------------------------------------------
小知识:
你知道比例尺的一像素对应的是几米麼?
答案:
Math.pow(, ( - zoom)); //把地图级别带进去,就能得出各个级别下1px对应多少米
【百度地图API】建立全国银行位置查询系统(二)——怎样为地图添加控件的更多相关文章
- 【百度地图API】建立全国银行位置查询系统(五)——如何更改百度地图的信息窗口内容?
原文:[百度地图API]建立全国银行位置查询系统(五)--如何更改百度地图的信息窗口内容? 摘要: 酷讯.搜房.去哪儿网等大型房产.旅游酒店网站,用的是百度的数据库,却显示了自定义的信息窗口内容,这是 ...
- 【百度地图API】建立全国银行位置查询系统(四)——如何利用百度地图的数据生成自己的标注
原文:[百度地图API]建立全国银行位置查询系统(四)--如何利用百度地图的数据生成自己的标注 摘要: 上一章留个悬念,"如果自己没有地理坐标的数据库,应该怎样制作银行的分布地图呢?&quo ...
- 【百度地图API】建立全国银行位置查询系统(三)——如何在地图上添加银行标注
原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo, ...
- 【百度地图API】建立全国银行位置查询系统(一)——如何创建地图
原文:[百度地图API]建立全国银行位置查询系统(一)--如何创建地图 <摘要>你将在第一章中学会以下知识: 如何创建一个网页文件 怎样利用百度地图API建立一张2D地图,以及3D地图 如 ...
- 百度地图API,展示地图和添加控件
1.申请百度账号和AK 点我申请 2.准备页面 根据HTML标准,每一份HTML文档都应该声明正确的文档类型,我们建议您使用最新的符合HTML5规范的文档声明: <!DOCTYPE html&g ...
- 【高德地图API】一句话搞定webmap(一)——轻地图组件
原文:[高德地图API]一句话搞定webmap(一)——轻地图组件 摘要: 遥想当年,在APP中加入LBS元素相当困难:要刻苦学习java,要刻苦学习iOS开发,要刻苦学习javascript…… 而 ...
- WordPress使用淘宝IP地址库的API显示评论者的位置信息(二)
1 淘宝IP地址库的接口说明 在上一篇文章<WordPress使用淘宝IP地址库的API显示评论者的位置信息(一)>中,vfhky使用了新浪工具提供的这个IP接口显示博客评论者的位置信息. ...
- Android应用中使用百度地图API定位自己的位置(二)
官方文档:http://developer.baidu.com/map/sdkandev-6.htm#.E7.AE.80.E4.BB.8B3 百度地图SDK为开发人员们提供了例如以下类型的地图覆盖物: ...
- 玩转百度地图API(地图,坐标,标记,添加控件,2D图,混合图,智能搜索,地址解析器,信息窗口)
1.注册得到appkey 2.直接上代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...
随机推荐
- Android Framework 其中A记录
一个简短的引论 以往的研究太偏应用层的功能,实现了,原则上不进入非常理解,现在,研究人员framework该框架层. 创纪录的 1.下载源代码,文件夹例如以下: 2.Android系统的层次例如以下: ...
- OpenGL学习日记-2015.3.13——多实例渲染
实例化(instancing)或者多实例渲染(instancd rendering)是一种连续运行多条同样渲染命令的方法.而且每一个命令的所产生的渲染结果都会有轻微的差异. 是一种很有效的.有 ...
- HDU ACM 1267 下沙的沙子有几粒?->DP
题意:m个H和n个D,从左開始数H的累积个数总不比D的累计数少的排列有多少种.比如,3个H和1个D共同拥有3种符合要求的排列H D H H,H H D H,H H H D. 分析:状态方程为,DP[ ...
- Android引入高速缓存的异步加载全分辨率
Android引进高速缓存的异步加载全分辨率 为什么要缓存 通过图像缩放,我们这样做是对的异步加载优化的大图,但现在的App这不仅是一款高清大图.图.动不动就是图文混排.以图代文,假设这些图片都载入到 ...
- Http与协议TCP协议简单易懂
于C#编写代码,很多时候会遇到Http协议或TCP合约,这里做一个简单的了解. TCP对应于该传送层协议,和HTTP对应于应用层协议,从本质上讲,两者是没有可比性.Http该协议是基于TCP之上的,当 ...
- Android - 直线(line)画法
Android - 直线(line)画法 本文地址: http://blog.csdn.net/caroline_wendy 横线(horizontal line) <View android: ...
- jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释
因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...
- 2012在数据库技术会议上的讲话PPT打包
2012技术大会演讲PPT打包 DB2 Overview of Disaster Recovery Options.pdf: http://www.t00y.com/file/76767890 ...
- mac系统连接android电话
mac该系统不能连接android手机问题解决: 1.将电话 2.到场android手机vendor ID: 终端业务CMD: system_profiler SPUSBDataType 在列出的u ...
- android(9)_数据存储和访问3_scard基本介绍
使用Activity的openFileOutput()保存文件的方法,文件存储在手机空间,通常情况下,手机的存储空间不是很大,存储小文件确定.假设你要存储大文件,如视频,是不可行. 对于这样大的文件, ...