开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【百度地图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>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用所学Spring知识,实现简易的图书查询系统功能。实现查询全部图书。 根据书籍编号查询信息。 根据书名查询书籍信息。 根据状态查询书籍信息。
使用所学Spring知识,实现简易的图书查询系统功能。实现查询全部图书。 根据书籍编号查询信息。 根据书名查询书籍信息。 根据状态查询书籍信息。
50 0
Linux下C编程-----文件操作(1) 通过系统调用简单操作标准输入、标准输出、标准错误
Linux的 C系统调用操作  ,下面我们就来练习下 简单的系统调用操作 read系统调用测试 /************************************************************************* > File Name: read.
626 0
【百度地图API】建立全国银行位置查询系统(五)——如何更改百度地图的信息窗口内容?
原文:【百度地图API】建立全国银行位置查询系统(五)——如何更改百度地图的信息窗口内容? 摘要: 酷讯、搜房、去哪儿网等大型房产、旅游酒店网站,用的是百度的数据库,却显示了自定义的信息窗口内容,这是如何实现的呢? ------------------------------------------------------------------------------------------------------------------ 零、先来看看百度地图上的信息窗口长个什么样子 在来看看房产网站的信息窗口是什么样子的 怎么样,信息窗口的内容不一样吧。
1308 0
【百度地图API】你看过房产地图吗?你知道房产标注是如何建立的吗?
原文:【百度地图API】你看过房产地图吗?你知道房产标注是如何建立的吗? 你是不是看过很多房产网站?例如安居客,新浪乐居。 你是不是也想做一个能写文字的标注? 你知道怎么去实现麼? 其实,上图这样的标注是一个“自定义覆盖物”。
958 0
【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注
原文:【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法。那就是,只显示可视区域内的标注。
1152 0
凨-百度地图API之地图标注(JS版),地理位置信息,根据地址获取经度纬度
使用的时候记得更改百度地图的开发者KEY &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;title&gt;凨-百度地图API之地图标注(JS版),地理位置信息,根据
2323 0
+关注
杰克.陈
一个安静的程序猿~
10424
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载