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

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

摘要:

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

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

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

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

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

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

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

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

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

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

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

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

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




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

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

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

  

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

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

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

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

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

首先,我们需要获取到百度数据库里的内容。可以使用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
});

  

这时,标注们就是招商银行(左图)了,而不是小红点(右图)。

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

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

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

比如,我选择了名称、地址和电话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>");  // 创建信息窗口对象

  

四、效果图和源代码

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

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

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

<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&#42;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>

  

上一篇:[更新]跨平台物联网通讯框架 ServerSuperIO v1.2(SSIO),增加数据分发控制模式


下一篇:Zabbix实践-宏变量