【百度地图API】建立全国银行位置查询系统(四)——如何利用百度地图的数据生成自己的标注...
摘要:
上一章留个悬念,"如果自己没有地理坐标的数据库,应该怎样制作银行的分布地图呢?"
答案就是,利用百度地图上的数据。
----------------------------------------------------------------------------------------------
我们不用花大把时间写代码去跑数据,只需要利用百度地图API提供的免费接口,就可以快速完成这一功能。
查看示例,请点击这里。
-----------------------------------------------------------------------------------------------
一、建立不同的查询按钮
还是以招商银行,中国银行和建设银行三个为例,建立三个不同的查询按钮。我想用最直观的展现方式来教学,所以使用了三个按钮。当然,你也可以建立一个下拉列表,或者一个输入框来传参数。html代码如下:
<input type="button" onclick="milk_zg();" value="中国银行" />
<input type="button" onclick="milk_js();" value="建设银行" />
针对这三个按钮,写三个不同的查询。
local.search('招商银行');
}
function milk_zg(){
local.search('中国银行');
}
function milk_js(){
local.search('建设银行');
}
如何定义三个不同的标注,在上一章已经讲过了,我这里就不重复了。下面进入重点部分!!
二、利用百度地图数据库
由于我们要将从百度地图查询出来的数据,显示成自己定义的标注,那么就需要使用到回调函数。经过查询,LocalSearch的回调函数是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。在这里,需要针对不同的查询,显示不同的标注图案。所以,需要判断一下关键词。
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);
三、细节完善
为了便于观察结果和更好的用户体验,需要在第二次查询时,清除上一次查询的结果。
点击marker需要弹出infowindow,这里要设置一下。以前写过这个点,这里就不多说了。
-------------------------
运行代码,请点击这里。
最后,贴出全部源代码,供大家下载。
<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>
【百度地图API】建立全国银行位置查询系统(四)——如何利用百度地图的数据生成自己的标注...相关推荐
- 【百度地图API】建立全国银行位置查询系统(五)——如何更改百度地图的信息窗口内容?...
[百度地图API]建立全国银行位置查询系统(五)--如何更改百度地图的信息窗口内容? 原文: [百度地图API]建立全国银行位置查询系统(五)--如何更改百度地图的信息窗口内容? 摘要: 酷讯.搜房. ...
- 黑名单将公开 我国建立行贿犯罪档案查询系统
<script language='javascript' src='http://www.taizhou.la/AD/ad.js'></script> 新华网北京11月1日电 ...
- 利用Excel表格中数据生成地图类型可视化图形案例
利用Excel表格中数据生成地图类型可视化图形案例 一.准备工作 二.读取excel数据 三.创建地图并进行设置 创建地图 设置地图相关参数 四.渲染保存为网页文件 写在最后 某人工作不设限,创新不断 ...
- centerandzoom 无效_百度地图api h5获取当前位置授权(iphone6s 和 iphone7失效)
百度地图获取当前位置授权对于ipnone6s和ipone7没有用,别的机型都可以,下面贴代码: (定义调用本地授权函数) var getLocation = function(callback) { ...
- java程序调用百度Geocoding API逆地址解析通过经纬度查询位置
自从百度升级了自己的逆地址解析调用接口,就多了一些调用限制,具体参数可以参照百度给出的解释.本文主要研究通过java代码调用该接口: 下面给出调用接口的方法: public static String ...
- Java使用百度地图API,根据地址,查询地址坐标。
使用场景:有时候,在实际项目中,某个地图图标中,我们需要知道地址坐标.在地图上的直观显示. 步骤一: 知道百度地图API官方网站(http://lbsyun.baidu.com/),注册账号,创建应用 ...
- python 通过腾讯地图API获取全国关键词(楼盘/商场)位置信息
到腾讯地图API官网https://lbs.qq.com/index.html 申请一张账号,申请开发者密钥(Key):申请密钥. 以下为搜索全国万达的地理位置信息 #!coding=utf-8 im ...
- Vue 百度地图API实现定位用户位置功能
一.进入百度地图 百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com) 1.1注册登录 1.2进入控制台 应用管理->我的应用->创建应用 1.3创建应用 填 ...
- 调用阿里API实现全国快递物流查询
作者介绍 王梅,女,西安工程大学电子信息学院,2022级研究生 研究方向:机器视觉与人工智能 电子邮件:1095647386@qq.com 王泽宇,男,西安工程大学电子信息学院,2022级研究生,张宏 ...
最新文章
- DB-MySQL:MySQL 事务
- Yolov5总结文档(理论、代码、实验结果)
- linux 提权方法总结
- python3.6 在 windows10 下使用pycrypto
- Linux目录结构介绍
- 老年计算机音乐,老年音乐影集相机V1.2.5
- 转: java多线程-ThreadPoolExecutor的拒绝策略RejectedExecutionHandler
- 前端学习(2856):简单秒杀系统学习之定时器循环显示
- 工作23:vue---封装request做数据请求
- 计算机专业简历自我评价,计算机专业毕业生简历自我评价
- Dataframe 新增一列, apply 通用方法
- 什么都懂, 为什么没有业绩?
- 关于origin2019的安装教程
- ABP框架的理解和总结
- C语言编程练习---2021级山东理工大学ACM实验三题解
- ImportError: DLL load failed while importing QtWidgets: 找不到指定的程序
- 2022年全球市场软件无线电平台总体规模、主要企业、主要地区、产品和应用细分研究报告
- alter database recover managed standby database 语句
- 行为设计学-让创意更有黏性
- Android触摸屏失效后的操作方法
热门文章
- Android动画曲线库AndroidEasingFunctions
- 精灵动画Animation对话框组成Idle动画的各精灵
- OUYA游戏开发快速入门教程
- Science Advances文章揭示长时记忆的神经动态表征机制
- [pyinstaller]PermissionError: [Errno 13] Permission denied:C:\Users\xxx\AppData\Local\ucrtbase.dll
- ant 编译java 项目_使用ant编译打包、部署简单的javaweb项目 --01
- 2021CCF颁奖典礼首次多平台网络直播,致敬获得者!CCF杰出工程师
- 你的iPhone 13,粉了吗?
- 「我要出轨了」!伯克利的这个AI,可以预测机器人何时将脱离
- 伪造GPS信号就能把无人车带沟里?百度Apollo工程师实验证明:自动驾驶没那么好骗...