【百度地图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(, ), // 标注显示大小
{
offset: new BMap.Size(, ), // 标注底部小尖尖的偏移量
imageOffset: new BMap.Size(, ) // 这里相当于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>
【百度地图API】建立全国银行位置查询系统（五）——如何更改百度地图的信息窗口内容？的更多相关文章
- 【百度地图API】建立全国银行位置查询系统（四）——如何利用百度地图的数据生成自己的标注
原文:[百度地图API]建立全国银行位置查询系统(四)--如何利用百度地图的数据生成自己的标注 摘要: 上一章留个悬念,"如果自己没有地理坐标的数据库,应该怎样制作银行的分布地图呢?&quo ...
- 【百度地图API】建立全国银行位置查询系统（三）——如何在地图上添加银行标注
原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo, ...
- 【百度地图API】建立全国银行位置查询系统（二）——怎样为地图添加控件
原文:[百度地图API]建立全国银行位置查询系统(二)--怎样为地图添加控件 <摘要>你将在第二章中学会以下知识: 使用手写代码的利器——notepad++: 如何为地图添加控件——鱼骨. ...
- 【百度地图API】建立全国银行位置查询系统（一）——如何创建地图
原文:[百度地图API]建立全国银行位置查询系统(一)--如何创建地图 <摘要>你将在第一章中学会以下知识: 如何创建一个网页文件 怎样利用百度地图API建立一张2D地图,以及3D地图 如 ...
- Android应用中使用百度地图API定位自己的位置（二）
官方文档:http://developer.baidu.com/map/sdkandev-6.htm#.E7.AE.80.E4.BB.8B3 百度地图SDK为开发人员们提供了例如以下类型的地图覆盖物: ...
- 玩转百度地图API（地图,坐标,标记,添加控件,2D图,混合图,智能搜索,地址解析器,信息窗口)
1.注册得到appkey 2.直接上代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...
- java实现根据高德地图API接口进行地址位置解析，将地址转化为经纬度
原创文章,转载请注明,欢迎评论和更改. 1,所需额外ar包,import net.sf.json.JSONObject; 2,完整源代码代码 package com.travel.util; impo ...
- 百度地图API调用实例之地址标注与位置显示
之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...
- Python 读取照片的信息：拍摄时间、拍摄设备、经纬度等，以及根据经纬度通过百度地图API获取位置
通过第三方库exifread读取照片信息.exifread官网:https://pypi.org/project/ExifRead/ 一.安装exifreadpip install exifread ...
随机推荐
- TCP/IP 网络精讲：开宗明义及第一课
内容简介 1.课程大纲 2.第一部分第一课:互联网历史 3.第一部分第二课预告:互联网的创立,OSI七层模型 课程大纲 我们将带大家一起来学习很多网络方面的技能,向大家介绍TCP/IP的基础知识点.你 ...
- iPhone发展【一】从HelloWorld开始
转载请注明出处.原文网址:http://blog.csdn.net/m_changgong/article/details/8013553 作者:张燕广 从经典的HelloWorld開始踏入iPhon ...
- 我学cocos2d-x (两) 采用Delegate（信托）
Delegate(信托)什么 Delegate是ios开发中的一个概念,主要是为了让类A中的功能,放到类B中来实现,这样能够合理的把功能划分到不同的文件里进行实现,从而更好的实现模块的分离.如UIAp ...
- 深入理解Android中ViewGroup
文章目录 [隐藏] 一.ViewGroup是什么? 二.ViewGroup这个容器 2.1 添加View的算法 2.1.1 我们先来分析addViewInner方法: 2.1.2 addInArr ...
- 8、Cocos2dx 3.0三，找一个小游戏开发3.0存储器管理的版本号
重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27693365 复杂的内存管理 移动设备上的硬件资源十 ...
- js cookie设置最大过期时间 Infinity
Note: 对于永久cookie我们用了Fri, 31 Dec 9999 23:59:59 GMT作为过期日.如果你不想使用这个日期,可使用世界末日Tue, 19 Jan 2038 03:14:07 ...
- 导出文本pdf文件
出口手续往往是一些数据需求,学习文本导出到今天pdf文件.主要用于QPrinter,QPainter TextEditToPdf::TextEditToPdf(QWidget *parent, Qt: ...
- 使用C#在Windows应用商店程序中获取CPU信息
using Windows.Devices.Enumeration; string guidStr="{97FADB10-4E33-40AE-359C-8BEF029DBDD0}" ...
- 解决一bug的流程复盘
听同事说有一个功能不好使了,当时有事,过了一段时间来看看这个bug 解决问题时,看的是老的日志,根据老日志看来看去没有发现问题,觉得很困惑 然后手动执行了一下,发现问题没有重现.与另一个团队的同事沟通 ...
- LeetCode :: Insertion Sort List [具体分析]
Sort a linked list using insertion sort. 仍然是一个很简洁的题目,让我们用插入排序给链表排序:这里说到插入排序.能够来回想一下, 最主要的入门排序算法.就是插入 ...