time 
设为首页】【收藏本站
当前位置: 主页 > JavaScript > 其它JS框架 > 【百度地图API】建立全国银行位置查询系统(二)——怎样为地图添加控件

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

时间:2011-02-25 00:23 点击:1659次 字体:[ ]




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

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

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

一、安装配置notepad++

【百度地图API】建立全国银行位置查询系统(二)——怎样为地图添加控件_www.fengfly.com

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

1、下载安装

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

2、如何配置tab

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

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

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

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

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

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

【百度地图API】建立全国银行位置查询系统(二)——怎样为地图添加控件_www.fengfly.com

如上图,左边为关闭(默认);右边为开启。

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

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

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

  • BMAP_ANCHOR_TOP_LEFT  左上
  • BMAP_ANCHOR_TOP_RIGHT 右上
  • BMAP_ANCHOR_BOTTOM_LEFT 左下
  • BMAP_ANCHOR_BOTTOM_RIGHT 右下

 

map.addControl(new BMap.OverviewMapControl({isOpen: 1, 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 表示只显示控件的缩放部分功能。

【百度地图API】建立全国银行位置查询系统(二)——怎样为地图添加控件_www.fengfly.com

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

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

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

点击这里运行代码(迷你鱼骨)。

3、比例尺控件——ScaleControl

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

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

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

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

【百度地图API】建立全国银行位置查询系统(二)——怎样为地图添加控件_www.fengfly.com

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

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

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

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

【百度地图API】建立全国银行位置查询系统(二)——怎样为地图添加控件_www.fengfly.com

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

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

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

点击这里运行代码。(3D图控件)

5、版权控件——CopyrightControl

【百度地图API】建立全国银行位置查询系统(二)——怎样为地图添加控件_www.fengfly.com

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

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

 

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

 

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

【百度地图API】建立全国银行位置查询系统(二)——怎样为地图添加控件_www.fengfly.com

复习要点:

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

小知识:

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

答案:

 

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

 

 



本文地址 : http://www.fengfly.com/plus/view-196326-1.html
标签: 百度地图API 查询系统 全国银行位置
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: