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

简介: 原文:【百度地图API】建立全国银行位置查询系统(四)——如何利用百度地图的数据生成自己的标注摘要:   上一章留个悬念,"如果自己没有地理坐标的数据库,应该怎样制作银行的分布地图呢?"   答案就是,利用百度地图上的数据。
原文: 【百度地图API】建立全国银行位置查询系统(四)——如何利用百度地图的数据生成自己的标注

摘要:

  上一章留个悬念,"如果自己没有地理坐标的数据库,应该怎样制作银行的分布地图呢?"

  答案就是,利用百度地图上的数据。

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

我们不用花大把时间写代码去跑数据,只需要利用百度地图API提供的免费接口,就可以快速完成这一功能。

img_abd518be5ec5c028203e731255ac8509.jpg

查看示例,请点击这里

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

一、建立不同的查询按钮

  还是以招商银行,中国银行和建设银行三个为例,建立三个不同的查询按钮。我想用最直观的展现方式来教学,所以使用了三个按钮。当然,你也可以建立一个下拉列表,或者一个输入框来传参数。html代码如下:

< input type ="button" onclick ="milk_zs();" value ="招商银行" />
< input type ="button" onclick ="milk_zg();" value ="中国银行" />
< input type ="button" onclick ="milk_js();" value ="建设银行" />

  针对这三个按钮,写三个不同的查询。

function milk_zs(){
local.search(
' 招商银行 ' );
}
function milk_zg(){
local.search(
' 中国银行 ' );
}
function milk_js(){
local.search(
' 建设银行 ' );
}

  如何定义三个不同的标注,在上一章已经讲过了,我这里就不重复了。下面进入重点部分!!

二、利用百度地图数据库

  由于我们要将从百度地图查询出来的数据,显示成自己定义的标注,那么就需要使用到回调函数。经过查询,LocalSearch的回调函数是searchComplete。用法如下:

var local = new BMap.LocalSearch(map,{onSearchComplete: searchComplete}); // 构造一个查询

  接下来,我们要将在回调函数里进行操作。遍历所有查询到的坐标点,读一个获取的点,就自己添加一个自定义标注。读点,使用的是getCurrentNumPois接口。

// 查询完毕的回调函数
var searchComplete = function (results){
if (local.getStatus() != BMAP_STATUS_SUCCESS){
return ;
}
for ( var cnt = 0 ; cnt < results.getCurrentNumPois(); cnt ++ ){
var point = results.getPoi(cnt);
addMarker(results,point, cnt);
}
}

  为了让代码看上去更加清晰,我把添加自定义标注的代码提取出来,单独写成一个函数addMarker。在这里,需要针对不同的查询,显示不同的标注图案。所以,需要判断一下关键词。

var myIcon = "" ;
if (results.keyword == " 招商银行 " ){
myIcon
= zsIcon;
}
else if (results.keyword == " 中国银行 " ){
myIcon
= zgIcon;
}
else if (results.keyword == " 建设银行 " ){
myIcon
= jsIcon;
}
else {
myIcon
= zsIcon;
}
var marker = new BMap.Marker(point.point, {icon: myIcon});
map.addOverlay(marker);

三、细节完善

  为了便于观察结果和更好的用户体验,需要在第二次查询时,清除上一次查询的结果。

map.clearOverlays(); // 清除地图上覆盖物

  点击marker需要弹出infowindow,这里要设置一下。以前写过这个点,这里就不多说了。

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

运行代码,请点击这里

最后,贴出全部源代码,供大家下载。

< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 三家银行搜索 </ title >
< script type ="text/javascript" src ="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.1&services=true" >
</ script >
</ head >
< body >
< div style ="width:520px;height:340px;border:1px solid gray" id ="container" ></ div >
< input type ="button" onclick ="milk_zs();" value ="招商银行" />
< input type ="button" onclick ="milk_zg();" value ="中国银行" />
< input type ="button" onclick ="milk_js();" value ="建设银行" />
</ body >
</ html >
< script type ="text/javascript" >
// 查询完毕添加自定义标注
function addMarker(results,point, index){
// 创建招商银行的标注图标
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 myIcon = "" ;
if (results.keyword == " 招商银行 " ){
myIcon
= zsIcon;
}
else if (results.keyword == " 中国银行 " ){
myIcon
= zgIcon;
}
else if (results.keyword == " 建设银行 " ){
myIcon
= jsIcon;
}
else {
myIcon
= zsIcon;
}
var marker = new BMap.Marker(point.point, {icon: myIcon});

var infoWindow = new BMap.InfoWindow(point.title); // 创建信息窗口对象
marker.addEventListener( " click " ,
function (){
marker.openInfoWindow(infoWindow);
}
);
map.addOverlay(marker);
}

// 查询完毕的回调函数
var searchComplete = function (results){
if (local.getStatus() != BMAP_STATUS_SUCCESS){
return ;
}
for ( var cnt = 0 ; cnt < results.getCurrentNumPois(); cnt ++ ){
var point = results.getPoi(cnt);
addMarker(results,point, cnt);
}
}

var map = new BMap.Map( " container " ); // 创建地图容器
map.centerAndZoom( new BMap.Point( 116.404 , 39.915 ), 11 ); // 初始化地图
var local = new BMap.LocalSearch(map,{onSearchComplete: searchComplete}); // 构造一个查询

// 定义三个不同的查询
function milk_zs(){
map.clearOverlays();
local.search(
' 招商银行 ' );
}
function milk_zg(){
map.clearOverlays();
local.search(
' 中国银行 ' );
}
function milk_js(){
map.clearOverlays();
local.search(
' 建设银行 ' );
}
</ script >
目录
相关文章
|
10天前
|
算法 Linux API
【Linux系统编程】Linux下删除文件的 API方式以及文件删除机制差异
【Linux系统编程】Linux下删除文件的 API方式以及文件删除机制差异
47 0
|
10天前
|
安全 中间件 API
跨平台整合:如何在不同系统中使用淘宝商品详情API
使用淘宝商品详情API实现跨平台整合,涉及步骤包括理解平台要求、研究API文档、设计数据模型、开发中间件、确保安全认证、测试调试、遵循法规、UI适配及持续维护。此过程能共享数据,提升效率,增加销售机会,优化顾客体验。注意API调用限制、数据格式及各平台特定需求。
27 1
|
8天前
|
定位技术 API
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
|
10天前
|
Linux API
Linux系统编程之文件编程常用API回顾和文件编程一般步骤
Linux系统编程之文件编程常用API回顾和文件编程一般步骤
Linux系统编程之文件编程常用API回顾和文件编程一般步骤
|
10天前
|
JavaScript 搜索推荐 定位技术
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
|
10天前
|
存储 监控 BI
HIS系统是什么?一套前后端分离云HIS系统源码 接口技术RESTful API + WebSocket + WebService
医院管理信息系统(全称为Hospital Information System)即HIS系统。 常规模版包括门诊管理、住院管理、药房管理、药库管理、院长查询、电子处方、物资管理、媒体管理等,为医院管理提供更有力的保障。 HIS系统以财务信息、病人信息和物资信息为主线,通过对信息的收集、存储、传递、统计、分析、综合查询、报表输出和信息共享,及时为医院领导及各部门管理人员提供全面、准确的各种数据。 门诊医生工作站采用下拉式汉化菜单,界面友好,实用性强,设有与门诊挂号收费系统、医技科室信息系统、住院结算信息系统的软件接口。
37 1
|
10天前
|
Java BI API
SAP Cloud for Customer 里如何通过 ABSL 二次开发方式消费 SAP S/4HANA 系统的 API
SAP Cloud for Customer 里如何通过 ABSL 二次开发方式消费 SAP S/4HANA 系统的 API
26 0
|
10天前
|
JavaScript 前端开发 定位技术
GPS坐标显示在百度地图上(Qt+百度地图)
GPS坐标显示在百度地图上(Qt+百度地图)
17 0
|
10天前
|
算法 Linux API
【Linux系统编程】一文了解 Linux目录的创建和删除API 创建、删除与读取
【Linux系统编程】一文了解 Linux目录的创建和删除API 创建、删除与读取
31 0
【Linux系统编程】一文了解 Linux目录的创建和删除API 创建、删除与读取
|
10天前
|
消息中间件 监控 安全
探究如何在Linux系统中修改进程资源限制:四种方法调整进程限制,让你的系统高效运行(包含应用层getrlimit和setrlimit API)
探究如何在Linux系统中修改进程资源限制:四种方法调整进程限制,让你的系统高效运行(包含应用层getrlimit和setrlimit API)
98 0

热门文章

最新文章