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

摘要：

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

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

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

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

查看示例，请点击这里。

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

一、建立不同的查询按钮

　　还是以招商银行，中国银行和建设银行三个为例，建立三个不同的查询按钮。我想用最直观的展现方式来教学，所以使用了三个按钮。当然，你也可以建立一个下拉列表，或者一个输入框来传参数。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 = ; 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>

【百度地图API】建立全国银行位置查询系统（四）——如何利用百度地图的数据生成自己的标注的更多相关文章

  1. 【百度地图API】建立全国银行位置查询系统（五）——如何更改百度地图的信息窗口内容？

    原文:[百度地图API]建立全国银行位置查询系统(五)--如何更改百度地图的信息窗口内容? 摘要: 酷讯.搜房.去哪儿网等大型房产.旅游酒店网站,用的是百度的数据库,却显示了自定义的信息窗口内容,这是 ...

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

    原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo, ...

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

    原文:[百度地图API]建立全国银行位置查询系统(二)--怎样为地图添加控件 <摘要>你将在第二章中学会以下知识: 使用手写代码的利器——notepad++: 如何为地图添加控件——鱼骨. ...

  4. 【百度地图API】建立全国银行位置查询系统（一）——如何创建地图

    原文:[百度地图API]建立全国银行位置查询系统(一)--如何创建地图 <摘要>你将在第一章中学会以下知识: 如何创建一个网页文件 怎样利用百度地图API建立一张2D地图,以及3D地图 如 ...

  5. Android应用中使用百度地图API定位自己的位置（二）

    官方文档:http://developer.baidu.com/map/sdkandev-6.htm#.E7.AE.80.E4.BB.8B3 百度地图SDK为开发人员们提供了例如以下类型的地图覆盖物: ...

  6. 【百度地图API】如何利用地图API制作汽车沿道路行驶的动画？——如何获得道路层数据

    原文:[百度地图API]如何利用地图API制作汽车沿道路行驶的动画?--如何获得道路层数据 有几个做汽车导航的朋友问我说,他们想在地图上制作一辆车沿着道路行驶的动画.可是,百度地图的道路数据并没有公开 ...

  7. java实现根据高德地图API接口进行地址位置解析，将地址转化为经纬度

    原创文章,转载请注明,欢迎评论和更改. 1,所需额外ar包,import net.sf.json.JSONObject; 2,完整源代码代码 package com.travel.util; impo ...

  8. Python 读取照片的信息：拍摄时间、拍摄设备、经纬度等，以及根据经纬度通过百度地图API获取位置

    通过第三方库exifread读取照片信息.exifread官网:https://pypi.org/project/ExifRead/ 一.安装exifreadpip install exifread ...

  9. 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]

    相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...

随机推荐

  1. Android - 数据存储 －存储键值对

    如果你有少量的键值数据需要存储,可以使用SharedPreferencesAPI.SharedPreferences对象指向一个包含键值对的文件并且提供了一些简单的方法来读取它们.每个SharedPr ...

  2. Linux下一个Nginx安装步骤

    一个.下载pcre 官网下载:http://www.pcre.org/ # wget http://sourceforge.net/projects/pcre/files/pcre/8.35/pcre ...

  3. 输入n个数和输出调整后的n个数

    输入n个数和输出调整后的n个数 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 148  Solved: 118 [Submit][Status][We ...

  4. 遗传算法解决旅行商问题(TSP)

    这次的文章是以一份报告的形式贴上来,代码只是简单实现,难免有漏洞,比如循环输入的控制条件,说是要求输入1,只要输入非0就行.希望会帮到以后的同学(*^-^*) 一.问题描述 旅行商问题(Traveli ...

  5. 如何识别SQL Server中的IO瓶颈

    原文:如何识别SQL Server中的IO瓶颈 原文出自: http://www.mssqltips.com/sqlservertip/2329/how-to-identify-io-bottlene ...

  6. java并行体系结构

    并行编程 线程通信 共享内存和消息传递 线程同步 控制不同线程的运行顺序 java并发 基于共享内存模型 指令重排序 编译器重排序 处理器重排序 cpu重排序 写缓存区(cache.寄存器) 内存屏障 ...

  7. Meld Diff for windows 安装和配置

    Meld Diff for windows 安装和配置 假设你在ubuntu 正在开发中, meld diff 此工具你肯定不会感到陌生. 而且很容易使用. 在网上看 meld for Windows ...

  8. hdu 1290 竭诚为杭州电礼物50周年

    专门为杭州电50周年礼事 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tot ...

  9. ssis package 在调试状态中设置断点，程序 不进入断点 的解决方案

    原文:ssis package 在调试状态中设置断点,程序 不进入断点 的解决方案 针对 SSIS intergation 项目 > 属性 > Debug >Run64bITRunt ...

  10. kendoui仪表板和直方图 演示样本

    到那个时刻kendeodui我相信大家一定不陌生.该js在绘画方面的好成绩. 现在来看看 它的仪表盘和直方图效果: html和js代码例如以下: <!DOCTYPE html> <h ...