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

摘要：

酷讯、搜房、去哪儿网等大型房产、旅游酒店网站，用的是百度的数据库，却显示了自定义的信息窗口内容，这是如何实现的呢？

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

零、先来看看百度地图上的信息窗口长个什么样子

在来看看房产网站的信息窗口是什么样子的

怎么样，信息窗口的内容不一样吧。

但是它们都是用的百度地图的数据库哦~~~

怎么更改百度地图默认的信息窗口呢？快来学习吧~~

一、百度地图的数据覆盖率

据了解，截止到2011年6月底，百度地图的数据覆盖率为80.73%，达到国内第一的水平。

所以，使用百度强大的数据库，对与开发者来说，收益匪浅。

但如何利用百度的数据库，展现自己的信息窗口内容呢?

二、如何自定义信息窗口内容？

我们先来看一个简单的例子：

var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象

　　

例子中，“world”是信息窗口的内容，opts是信息窗口的设置选项。

“”引号中，可以书写任意的htm，已达到自定义信息窗口的目的。

opts的属性见官网的类参考，有如下设置。注意，设置是可选项，可以不写。

三、如何将自定义信息窗口与百度的数据库相联系

首先，我们需要获取到百度数据库里的内容。可以使用localsearch来搜索出数据。例如，我创建了一个搜索对象，搜索“招商银行”。

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

　　

看了我上一篇文章的朋友们，应该都知道，如何把那些小红点变成招商银行的图标了吧？

对啦，没错，就是修改marker的一个icon属性，更改图标即可。

    // 创建招商银行的标注图标    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                });

　　

这时，标注们就是招商银行（左图）了，而不是小红点（右图）。

对于搜索出来的数据，我们可以找到结果（result）的各种属性，见类参考，选择一些填入信息窗口，并且，可以自己修改内容：

比如，我选择了名称、地址和电话3个属性，然后自己写了几颗星，以及详情链接，代码如下：

var infoWindow = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>名称:</b>"+point.title+"</br><b>地址:</b>"+point.address+"</br><b>电话:</b>"+point.phoneNumber+"</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' target='_blank' href='http://www.ui-love.com'>详情>></a></div>");  // 创建信息窗口对象

　　

四、效果图和源代码

看见了麼？数据是真实可靠的，并且我加上了自己的内容在里面。可以做评价、详情链接，甚至价格、图片等等。

源代码里，我加入了其他两家银行，让大家做个对比。

<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?v=1.2"></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="建设银行" />

<div style="position:absolute;right:100px;top:10px;"><script type="text/javascript"><!--google_ad_client = "ca-pub-5845154460812025";/* 180*150 */google_ad_slot = "5267666065";google_ad_width = 180;google_ad_height = 150;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></div></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("<div style='line-height:1.8em;font-size:12px;'><b>名称:</b>"+point.title+"</br><b>地址:</b>"+point.address+"</br><b>电话:</b>"+point.phoneNumber+"</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' target='_blank' href='http://www.ui-love.com'>详情>></a></div>");  // 创建信息窗口对象    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>

　　

posted on 2015-01-07 14:28 NET未来之路 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/4208377.html

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

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

    摘要: 上一章留个悬念,"如果自己没有地理坐标的数据库,应该怎样制作银行的分布地图呢?" 答案就是,利用百度地图上的数据. ---------------------------- ...

  2. 黑名单将公开 我国建立行贿犯罪档案查询系统

    <script language='javascript' src='http://www.taizhou.la/AD/ad.js'></script> 新华网北京11月1日电 ...

  3. 格式化信息窗口内容—ArcGIS API for JavaScript

    InfoTemplate类用于定义一个信息窗口的内容和标题模板.如果您使用的是2.2或更高版本的API,则可以使用字符串或函数定义内容和标题.如果版本低于2.2,你只能使用字符串. 调整信息窗口大小 ...

  4. centerandzoom 无效_百度地图api h5获取当前位置授权(iphone6s 和 iphone7失效)

    百度地图获取当前位置授权对于ipnone6s和ipone7没有用,别的机型都可以,下面贴代码: (定义调用本地授权函数) var getLocation = function(callback) { ...

  5. java程序调用百度Geocoding API逆地址解析通过经纬度查询位置

    自从百度升级了自己的逆地址解析调用接口,就多了一些调用限制,具体参数可以参照百度给出的解释.本文主要研究通过java代码调用该接口: 下面给出调用接口的方法: public static String ...

  6. Java使用百度地图API，根据地址，查询地址坐标。

    使用场景:有时候,在实际项目中,某个地图图标中,我们需要知道地址坐标.在地图上的直观显示. 步骤一: 知道百度地图API官方网站(http://lbsyun.baidu.com/),注册账号,创建应用 ...

  7. python 通过腾讯地图API获取全国关键词（楼盘/商场）位置信息

    到腾讯地图API官网https://lbs.qq.com/index.html 申请一张账号,申请开发者密钥(Key):申请密钥. 以下为搜索全国万达的地理位置信息 #!coding=utf-8 im ...

  8. Vue 百度地图API实现定位用户位置功能

    一.进入百度地图 百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com) 1.1注册登录 1.2进入控制台 应用管理->我的应用->创建应用 1.3创建应用 填 ...

  9. 调用阿里API实现全国快递物流查询

    作者介绍 王梅,女,西安工程大学电子信息学院,2022级研究生 研究方向:机器视觉与人工智能 电子邮件:1095647386@qq.com 王泽宇,男,西安工程大学电子信息学院,2022级研究生,张宏 ...

最新文章

  1. php set name,PHP Gmagick setfilename()用法及代码示例
  2. Linux中增加软路由的两种方法,Linux中增加软路由的三种方法
  3. ACL 2021 | 北京大学KCL实验室：如何利用双语词典增强机器翻译？
  4. 2020-11-24
  5. 红帽linux iso镜像,红帽 Red Hat Linux相关产品iso镜像下载
  6. POJ-2400 Supervisor, Supervisee 带权值匹配+枚举所有匹配情况
  7. 2.4　表单数据的验证
  8. Redis基础笔记 （二）
  9. Android Studio调试功能使用总结【转】
  10. GithubPage自定义腾讯404界面
  11. Windows下使用TeamViewer连接远程服务器，以及解决“远程桌面关闭后TeamViewer不能连接”的问题
  12. SSH dao层异常 org.hibernate.HibernateException: No Session found for current thread
  13. 001_JavaScript数组常用方法总结及使用案例
  14. 金蝶oracle用鼎信诺取数,取数软件 审计取数软件?
  15. QT下的音乐播放器 （一）
  16. 麻省理工18年春软件构造课程阅读01“静态检查”
  17. ZoomIt 演示辅助软件 屏幕放大镜
  18. 美团2015年校园招聘部分笔试题
  19. 【复盘】如何打造自己的研发能力
  20. 大数据之足球盘口赔率凯利必发数据采集爬虫

热门文章

  1. C++函数指针的三种定义方法
  2. DELL服务器使用iDRAC挂载ISO做成虚拟光驱装系统
  3. 勿以善小而不为，勿以恶小而为之
  4. 个人计算机pc必备的外部设备是,个人计算机(PC)必备的外部设备是_____
  5. 安装Docker.v19和配置Docker Compose编排工具
  6. 机器学习模型的误差分析-逼近误差、泛化误差、优化误差
  7. B站java秒杀系统xyx小可爱qwq
  8. 炒股票开户,炒股票手续,炒股票怎样开户,炒股票怎么开户,炒股票开户流程
  9. 使用Windows自带命令校验文件哈希值
  10. adduser和useradd的详细使用笔记