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

简介: 原文:【百度地图API】建立全国银行位置查询系统(三)——如何在地图上添加银行标注你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo,酒店logo等) 如何在标注上显示信息窗口,以及添加文字标签等其他覆盖物; 最后,介绍一个获取坐标的给力工具。
原文: 【百度地图API】建立全国银行位置查询系统(三)——如何在地图上添加银行标注

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

  1. 如何在地图上添加带银行logo的标注?(你也可以换成商场logo,酒店logo等)
  2. 如何在标注上显示信息窗口,以及添加文字标签等其他覆盖物;
  3. 最后,介绍一个获取坐标的给力工具。

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

一、如何添加标注、标签和信息窗口?

img_5672b8879cafd28d5dbe282b9aa85cde.jpg

首先,我们需要创建一个点坐标,利用该点坐标来创建一个标注(Maker),最后将该标注显示在地图上。

比如我们了解到国家博物馆的坐标是116.407804,39.912123(如何获取这个坐标,请查看下文中的坐标拾取工具)。

所以创建这个点,再创建一个标注在这个点上。最关键的一步就是将它显示出来,显示覆盖物用addOverlay。

var pointMarker = new BMap.Point( 116.407804 , 39.912123 ); // 创建标注的坐标
var marker = new BMap.Marker(pointMarker); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中

 

接下来,我们需要在这个标注的基础上,添加一个信息窗口。

为了在标注上添加一个信息窗口,我们需要对该标注建立一个监听事件,当鼠标点击标注后,方能显示信息窗口。

添加事件请使用addEventListener.

 

var infoWindow = new BMap.InfoWindow( " 点击标注后信息窗口就显示了 " ); // 创建信息窗口对象
marker.addEventListener( " click " , function (){ // 给标注添加点击事件
this .openInfoWindow(infoWindow);
});

 

同理,你可以自己添加文字标签label。

其中point是文字标签显示的位置,offset可以设置它的偏移量。{}里的东西默认是可以不写的。

 

var label = new BMap.Label( " 请点击红色标注 " ,{point : pointMarker, 
        offset: new BMap.Size( 3 , - 6 )}); // 定义一个文字标签
map.addOverlay(label);

点击这里,运行该代码。右键点击新打开的窗口,可以查看源代码哦。

 

二、如何添加银行的标注?

但是,大家会不会觉得默认的这个红色标注很丑呢?那么我们一起来换一个标注吧!下面开始讲解,如何自定义标注。

为了看清楚,我把标注放得比较大。你自己可以换张小图片试试。

img_eae66cfb2e08c7122a558ee96030b115.jpg

首先,我们要准备的是一张标注的图片。注意,一定需要一张背景透明的图片。然后定义三家银行的标注样式。有4个地方需要我们来设置。

第一就是银行图标的地址,我们可以把多张银行图标放在一张图上。比如这张图,点击这里下载。

第二是这个标注的大小BMap.Size,需要根据你银行图标的大小来定。

第三个是标注的偏移量offset。为什么要有偏移量呢?因为我们希望图标下面那个小尖尖刚好指在我们需要的坐标点上。

第四个就是相当于CSS sprites的设置了。由于我们的银行图标都放在了同一张图上,所以需要靠imageOffset这个设置来调整显示位置。

具体代码如下:

 

// 创建招商银行的标注图标
var zsIcon = new BMap.Icon( " http://ui-love.com/baidumap/bank/marker.gif " , // 图片地址
new BMap.Size( 40 , 64 ), // 标注显示大小
{
offset:
new BMap.Size( 20 , 64 ), // 标注底部小尖尖的偏移量
imageOffset: new BMap.Size( 0 , 0 ) // 这里相当于CSS sprites
});
// 创建中国银行的标注图标
var zgIcon = new BMap.Icon( " http://ui-love.com/baidumap/bank/marker.gif " , // 图片地址
new BMap.Size( 40 , 64 ), // 标注显示大小
{
offset:
new BMap.Size( 20 , 64 ), // 标注底部小尖尖的偏移量
imageOffset: new BMap.Size( 0 , - 64 ) // 这里相当于CSS sprites
});
// 创建建设银行的标注图标
var jsIcon = new BMap.Icon( " http://ui-love.com/baidumap/bank/marker.gif " , // 图片地址
new BMap.Size( 40 , 64 ), // 标注显示大小
{
offset:
new BMap.Size( 20 , 64 ), // 标注底部小尖尖的偏移量
imageOffset: new BMap.Size( 0 , - 128 ) // 这里相当于CSS sprites
});

 

然后我们分别添加3个银行标注在地图上。点击这里运行代码。源代码如下:

 

<! 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 , anchor: BMAP_ANCHOR_TOP_RIGHT})); // 为地图添加鹰眼
map.addControl( new BMap.NavigationControl()); // 为地图添加鱼骨

var myCopyright = new BMap.CopyrightControl({offset: new BMap.Size( 485 , 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> ' });

// 创建招商银行的标注图标
var zsIcon = new BMap.Icon( " http://ui-love.com/baidumap/bank/marker.gif " , // 图片地址
new BMap.Size( 40 , 64 ), // 标注显示大小
{
offset:
new BMap.Size( 20 , 64 ), // 标注底部小尖尖的偏移量
imageOffset: new BMap.Size( 0 , 0 ) // 这里相当于CSS sprites
});
// 创建中国银行的标注图标
var zgIcon = new BMap.Icon( " http://ui-love.com/baidumap/bank/marker.gif " , // 图片地址
new BMap.Size( 40 , 64 ), // 标注显示大小
{
offset:
new BMap.Size( 20 , 64 ), // 标注底部小尖尖的偏移量
imageOffset: new BMap.Size( 0 , - 64 ) // 这里相当于CSS sprites
});
// 创建建设银行的标注图标
var jsIcon = new BMap.Icon( " http://ui-love.com/baidumap/bank/marker.gif " , // 图片地址
new BMap.Size( 40 , 64 ), // 标注显示大小
{
offset:
new BMap.Size( 20 , 64 ), // 标注底部小尖尖的偏移量
imageOffset: new BMap.Size( 0 , - 128 ) // 这里相当于CSS sprites
});

var pointMarker1 = new BMap.Point( 116.403704 , 39.912123 ); // 创建招商银行标注的坐标
var pointMarker2 = new BMap.Point( 116.407804 , 39.916123 ); // 创建中国银行标注的坐标
var pointMarker3 = new BMap.Point( 116.400804 , 39.915123 ); // 创建建设银行标注的坐标
var marker1 = new BMap.Marker(pointMarker1, {icon: zsIcon}); // 创建招商银行标注
var marker2 = new BMap.Marker(pointMarker2, {icon: zgIcon}); // 创建中国银行标注
var marker3 = new BMap.Marker(pointMarker3, {icon: jsIcon}); // 创建建设银行标注
map.addOverlay(marker1); // 将招商银行标注添加到地图中
map.addOverlay(marker2); // 将中国银行标注添加到地图中
map.addOverlay(marker3); // 将建设银行标注添加到地图中

var infoWindow1 = new BMap.InfoWindow( " 你点击了招商银行的标注 " ,{offset: new BMap.Size( 0 , - 64 )});
marker1.addEventListener(
" click " , function (){ // 给招商银行标注添加点击事件
this .openInfoWindow(infoWindow1); // 打开招商银行的窗口
});
var infoWindow2 = new BMap.InfoWindow( " 你点击了中国银行的标注 " ,{offset: new BMap.Size( 0 , - 64 )});
marker2.addEventListener(
" click " , function (){ // 给中国银行标注添加点击事件
this .openInfoWindow(infoWindow2); // 打开中国银行的窗口
});
var infoWindow3 = new BMap.InfoWindow( " 你点击了建设银行的标注 " ,{offset: new BMap.Size( 0 , - 64 )});
marker3.addEventListener(
" click " , function (){ // 给建设银行标注添加点击事件
this .openInfoWindow(infoWindow3); // 打开建设银行的窗口
});
</ script >
</ html >

 

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

小贴士:什么是覆盖物?

答:覆盖物包括了标注Marker、文字标签Label、信息窗口InfoWindow、圆形Circle、多边形Polygon,以及折线Polyline。

添加任何一个覆盖物都需要map.addOverlay();这个函数。

 

如何添加其他覆盖物呢?你可以到API的官方网站上查询类参考->覆盖物

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

 

三、找坐标的使用工具——坐标拾取系统

1、进入该工具网址:http://openapi.baidu.com/map/pick/index.html

2、在搜索框中输入你想查询位置的中文名称,例如“安定门”

img_eb00f8833edf3f6a970695e09b58d4fa.jpg

3、找到合适的位置,点击鼠标右键开启添加标注功能。(小窍门:地图级别越高,位置越精确,建议把地图级别开到17或者18级哦~)

4、开启功能后,你就可以左键点击地图了。无论你点在哪里,网页的右边都会出现一组坐标信息,这就是当前小红点的坐标了。

img_7edd1be00667c9d35dfef29b04c032c6.jpg

5、如果你想改变小红点的位置,可以直接点击地图上另外的点,也可以拖动小红点。

注意:如果你要拖动地图,请先点击鼠标右键,关闭添加标注的功能。

 

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

学到这里,大家已经可以动手自己做一张自定义的银行分布图了。

主要步骤:

1、利用工具找到银行的地理位置,也就是坐标。

2、把银行名称、地址、坐标等内容存入数据库。

img_558d4a05e87dc2da30d0ddd13bcdcdd9.jpg

3、创建一个搜索条,查询用户输入的关键字。比如,用户输入“大望路 招商银行”。

4、查询数据库,找到数据2符合条件。于是在(106.40,30.91)这个点上,添加一个招商银行的标注。

注意:这里显示的标注是自定义标注,就是说,如果查询的是招商银行,就显示招商银行的标注;查询的是建设银行,就显示建设银行的标注。

5、最后,利用panto或者setCenter把地图的中心移到银行标注的坐标点。

 

// 以下二者选其一即可。建议选第二个,因为地图平移的动画。
setCenter(markerPoint); // 重新设置地图的中心点
panto(markerPoint); // 将地图中心点平移到坐标点

 

至于怎样建立数据库,我这里就不多说了,因为不太涉及到GIS或者API的东西。

有兴趣的同学可以去学习一下数据库,还有PHP或者.NET等后台程序。

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

 

如果我们没有自己的数据库,也想建立一个银行网点的分布图,应该如何做呢?

在下一章,我们将学会,如何利用百度地图的数据库来建立全国银行网点的查询地图。

目录
相关文章
|
4天前
|
SQL Java API
Java一分钟之-JPA查询:JPQL与Criteria API
【6月更文挑战第14天】本文探讨了Java Persistence API (JPA)中的两种查询方式:JPQL和Criteria API。JPQL是面向对象的SQL,适用于简单查询,而Criteria API则提供类型安全的动态查询构造。文章指出了每种方法的常见问题和避免策略,如混淆实体属性与数据库字段、参数绑定错误、过度复杂化和性能问题。建议开发者根据需求选择适当的方法,并关注查询的可读性、可维护性和性能优化。
19 2
|
7天前
|
安全 Java API
Java一分钟之-GraphQL:查询语言与API设计
【6月更文挑战第11天】GraphQL,一种革命性的查询语言,正在改变Web开发中的API构建和使用方式。它允许客户端按需请求数据,减少冗余,提升性能。本文概述了GraphQL的核心理念,如声明式查询、强类型和统一入口,并讨论了Java开发者常遇问题:过度查询、Schema设计和安全性。解决方案包括使用Dataloader、优化Schema和实现授权机制。通过理解原理、关注性能、重视安全和持续实践,开发者能更好地利用GraphQL构建高效API。
18 2
|
1月前
|
定位技术 API
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
|
1月前
|
Linux API
Linux系统编程之文件编程常用API回顾和文件编程一般步骤
Linux系统编程之文件编程常用API回顾和文件编程一般步骤
Linux系统编程之文件编程常用API回顾和文件编程一般步骤
|
1月前
|
存储 缓存 运维
DataWorks操作报错合集之DataWorks根据api,调用查询文件列表接口报错如何解决
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
|
1月前
|
缓存 前端开发 JavaScript
【专栏】GraphQL,Facebook 开发的API查询语言,正在前端开发中崭露头角
【4月更文挑战第27天】GraphQL,Facebook 开发的API查询语言,正在前端开发中崭露头角。它提供强类型系统、灵活查询和实时更新,改善数据获取效率和开发体验。掌握GraphQL涉及学习基础概念、搭建开发环境和实践应用。结合前端框架,利用缓存和批量请求优化性能,与后端协作设计高效API。尽管有挑战,但GraphQL为前端开发开辟新道路,引领未来趋势。一起探索GraphQL,解锁前端无限可能!
|
1月前
|
API 数据库
工作流JBPM操作API启动实例&查询任务
工作流JBPM操作API启动实例&查询任务
20 0
|
1月前
|
存储 监控 BI
HIS系统是什么?一套前后端分离云HIS系统源码 接口技术RESTful API + WebSocket + WebService
医院管理信息系统(全称为Hospital Information System)即HIS系统。 常规模版包括门诊管理、住院管理、药房管理、药库管理、院长查询、电子处方、物资管理、媒体管理等,为医院管理提供更有力的保障。 HIS系统以财务信息、病人信息和物资信息为主线,通过对信息的收集、存储、传递、统计、分析、综合查询、报表输出和信息共享,及时为医院领导及各部门管理人员提供全面、准确的各种数据。 门诊医生工作站采用下拉式汉化菜单,界面友好,实用性强,设有与门诊挂号收费系统、医技科室信息系统、住院结算信息系统的软件接口。
51 1
|
1月前
|
Java BI API
SAP Cloud for Customer 里如何通过 ABSL 二次开发方式消费 SAP S/4HANA 系统的 API
SAP Cloud for Customer 里如何通过 ABSL 二次开发方式消费 SAP S/4HANA 系统的 API
28 0
|
1月前
|
存储 Kubernetes 容器
百度搜索:蓝易云【Kubernetes使用helm部署NFS Provisioner】
现在,你已经成功使用Helm部署了NFS Provisioner,并且可以在Kubernetes中创建使用NFS存储的PersistentVolumeClaim。
154 10