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

简介: 原文:【百度地图API】建立全国银行位置查询系统(二)——怎样为地图添加控件你将在第二章中学会以下知识: 使用手写代码的利器——notepad++; 如何为地图添加控件——鱼骨、鹰眼、比例尺、2D3D转换控件、版权控件。
原文: 【百度地图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: 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 表示只显示控件的缩放部分功能。

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

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

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( 5 , 40 )})); // 添加一个带上偏移量的比例尺

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

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

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( 82 , 0 )}); // 设置版权信息偏移量
map.addControl(myCopyright); // 为地图添加版权控件
myCopyright.addCopyright({id : 1 , 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( 2 , ( 18 - zoom)); // 把地图级别带进去,就能得出各个级别下1px对应多少米
目录
相关文章
|
1月前
|
API PHP
2025宝塔API一键建站系统PHP源码
2025宝塔API一键建站系统PHP源码
139 90
|
1月前
|
存储 数据挖掘 BI
API数据源:轻松接入各类业务系统数据
在数字化转型中,企业面临多样化的数据需求。Quick BI推出API数据源功能,支持广泛的数据接入,包括实时天气、电商交易及内部业务数据,极大丰富了可分析数据范围。该功能提供灵活的连接方式(抽取和直连模式)、多元授权机制(基础认证、前置请求)和自动化数据解析,降低了操作门槛,提升了配置效率。通过动态Token获取等最佳实践,确保数据安全与实时性,满足企业具体业务需求。了解更多,请访问Quick BI官方文档或瓴羊官网。
159 77
|
3天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
24 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
4天前
|
数据采集 JSON 监控
速卖通商品列表接口(以 AliExpress Affiliate 商品查询 API 为例)
以下是使用 Python 调用速卖通商品列表接口(以 AliExpress Affiliate 商品查询 API 为例)的代码示例。该示例包含准备基础参数、生成签名、发送请求和处理响应等关键步骤,并附有详细注释说明。代码展示了如何通过公共参数和业务参数构建请求,使用 HMAC-SHA256 加密生成签名,确保请求的安全性。最后,解析 JSON 响应并输出商品信息。此接口适用于商品监控、数据采集与分析及商品推荐等场景。注意需通过 OAuth2.0 获取 `access_token`,并根据官方文档调整参数和频率限制。
|
5天前
|
缓存 Java 应用服务中间件
java语言后台管理若依框架-登录提示404-接口异常-系统接口404异常如何处理-登录验证码不显示prod-api/captchaImage 404 (Not Found) 如何处理-解决方案优雅草卓伊凡
java语言后台管理若依框架-登录提示404-接口异常-系统接口404异常如何处理-登录验证码不显示prod-api/captchaImage 404 (Not Found) 如何处理-解决方案优雅草卓伊凡
27 5
|
2月前
|
安全 API 数据安全/隐私保护
自学记录HarmonyOS Next DRM API 13:构建安全的数字内容保护系统
在完成HarmonyOS Camera API开发后,我深入研究了数字版权管理(DRM)技术。最新DRM API 13提供了强大的工具,用于保护数字内容的安全传输和使用。通过学习该API的核心功能,如获取许可证、解密内容和管理权限,我实现了一个简单的数字视频保护系统。该系统包括初始化DRM模块、获取许可证、解密视频并播放。此外,我还配置了开发环境并实现了界面布局。未来,随着数字版权保护需求的增加,DRM技术将更加重要。如果你对这一领域感兴趣,欢迎一起探索和进步。
94 18
|
2月前
|
安全 测试技术 API
探秘驱动软件系统高效协同的高效协同之API接口
在数字化时代,API(应用程序编程接口)作为现代软件开发的核心组件,犹如无形的桥梁,连接不同应用、平台和服务,促进数据和功能自由流动。本文深入探讨API的基本概念、工作原理、核心组成部分及其在现代软件开发中的应用与最佳实践。通过统一数据格式、确保安全性和实施版本控制,API助力高效协同,并在社交媒体、物联网及企业系统中展现出巨大价值。未来,API将朝着智能化方向发展,同时面临并解决安全挑战,推动各行业的数字化转型。
111 6
|
2月前
|
缓存 算法 API
查询域名WHOIS信息免费API接口教程
该API用于查询顶级域名的WHOIS信息,不支持国别域名和中文域名。通过POST或GET请求,需提供用户ID、KEY及待查询域名。返回信息包括域名状态、注册商、时间等详细数据。示例与文档见官网。
|
2月前
|
API
icp备案查询免费API接口教程
该接口用于查询指定域名的ICP备案信息,支持POST或GET请求方式。请求时需提供用户ID、用户KEY及待查询的域名,可选参数为查询通道。响应中包含状态码、消息内容、备案号、备案主体、域名及审核时间等信息。示例中提供了GET和POST请求方式及返回数据样例。
|
5天前
|
API PHP 开发者
速卖通商品详情接口(速卖通API系列)
速卖通(AliExpress)是阿里巴巴旗下的跨境电商平台,提供丰富的商品数据。通过速卖通开放平台(AliExpress Open API),开发者可获取商品详情、订单管理等数据。主要功能包括商品搜索、商品详情、订单管理和数据报告。商品详情接口aliexpress.affiliate.productdetail.get用于获取商品标题、价格、图片等详细信息。开发者需注册账号并创建应用以获取App Key和App Secret,使用PHP等语言调用API。该接口支持多种请求参数和返回字段,方便集成到各类电商应用中。

热门文章

最新文章