原文:【百度地图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. EJB学习笔记

      1 J2ee概述 J2ee是企业级的计算平台,它为分布式和基于组件的软件开发提供了一个“操作系统” Ant是什么工具?? EJB: 什么是EJB? 是一种server端组件结构,简化了开发分布式企 ...

  2. 在Sql中使用Try Catch

    原文:在Sql中使用Try Catch 今天在写sql中出现了!我想在sql使用trycatch吧! 哎..但是语法又记不住了! 那就清楚我们的google大师吧! 嘿,网上关于在sql中使用Try ...

  3. 2C 产品的本质是人性，2B 产品的背后是业务(转)

    本文作者李源是 BLUES 原来做 YY 语音客户端产品时候的同事,原来针对 YY 语音的游戏用户做 2C 的 PC 客户端产品和 APP,后来到某品牌手机做 2B 的后台系统.以下文章,是作者经历了 ...

  4. gdb经常使用的命令

    在调试程序的时候,gdb是一柄利器,恰当的使用gdb能够解决掉程序的很多bug. gdb并不检查语法错误.那是gcc或者g++的事情,gdb干的是调试的事情. 说明: (1)gdb 程序名 [core ...

  5. MongoDB CRUD 基础知识

    建立一个良好的发展环境 环境win8 x64,下载并安装省略.经mongodb 的bin文件夹增加windows的path中,为以后使用方便. c盘新建存储目录:c:/data/db 执行服务:WIN ...

  6. HDU 1710-Binary Tree Traversals（二进制重建）

    Binary Tree Traversals Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...

  7. Quartz.net开源作业调度

    Quartz.net开源作业调度框架使用详解 前言 quartz.net作业调度框架是伟大组织OpenSymphony开发的quartz scheduler项目的.net延伸移植版本.支持 cron- ...

  8. 2014年度辛星完全解读html部分

    接下来,我们继续学习HTML标签,希望大家可以再接再厉.同一时候辛星也会支持大家.我们一起努力,一起加油. 我们本小节来认识另外几个标签. *************空格和换行************ ...

  9. Codeforces 338D GCD Table 中国剩余定理

    主题链接:点击打开链接 特定n*m矩阵,[i,j]分值为gcd(i,j) 给定一个k长的序列,问能否匹配上 矩阵的某一行的连续k个元素 思路: 我们要求出一个解(i,j) 使得 i<=n &am ...

  10. [SQL Server优化]善用系统监视器，确定系统瓶颈

    原文:[SQL Server优化]善用系统监视器,确定系统瓶颈 来自: http://hi.baidu.com/solorez/blog/item/f82038fa0e71b78d9e51468c.h ...