【百度地图API】建立全国银行位置查询系统（五）——如何更改百度地图的信息窗口内容？
先来看看百度地图上的信息窗口长个什么样子
在来看看房产网站的信息窗口是什么样子的
怎么样，信息窗口的内容不一样吧。
但是它们都是用的百度地图的数据库哦~~~
怎么更改百度地图默认的信息窗口呢？快来学习吧~~
一、百度地图的数据覆盖率
据了解，截止到2011年6月底，百度地图的数据覆盖率为80.73%，达到国内第一的水平。
所以，使用百度强大的数据库，对与开发者来说，收益匪浅。
但如何利用百度的数据库，展现自己的信息窗口内容呢?
二、如何自定义信息窗口内容？
我们先来看一个简单的：
var infoWindow = new Window("World", opts);
// 创建信息窗口对象
例子中，“world”是信息窗口的内容，opts是信息窗口的设置选项。
“”引号中，可以书写任意的htm，已达到自定义信息窗口的目的。
opts的属性见官网的，有如下设置。注意，设置是可选项，可以不写。
三、如何将自定义信息窗口与百度的数据库相联系
首先，我们需要获取到百度数据库里的内容。可以使用localsearch来搜索出数据。例如，我创建了一个搜索对象，搜索“招商银行”。
var local = new BMap.LocalSearch(map,{onSearchComplete: searchComplete});
//构造一个查询local.search('招商银行');
看了我上一篇文章的朋友们，应该都知道，如何把那些小红点变成招商银行的图标了吧？
对啦，没错，就是修改marker的一个icon属性，更改图标即可。
// 创建招商银行的标注图标
var zsIcon = new BMap.Icon("/baidumap/bank/marker.gif",
//图片地址
new BMap.Size(<span STYLE="CoLor: #, <span STYLE="CoLor: #),
// 标注显示大小
offset: new BMap.Size(<span STYLE="CoLor: #, <span STYLE="CoLor: #),
// 标注底部小尖尖的偏移量
imageOffset: new BMap.Size(<span STYLE="CoLor: #, <span STYLE="CoLor: #)
// 这里相当于CSS sprites
这时，标注们就是招商银行（左图）了，而不是小红点（右图）。
对于搜索出来的数据，我们可以找到结果（result）的各种属性，见，选择一些填入信息窗口，并且，可以自己修改内容：
比如，我选择了名称、地址和电话3个属性，然后自己写了几颗星，以及详情链接，代码如下：
var infoWindow = new Window("&div style='line-height:1.8font-size:12'&&b&名称:&/b&"+point.title+"&/br&&b&地址:&/b&"+point.address+"&/br&&b&电话:&/b&"+point.phoneNumber+"&/br&&b&口碑：&/b&&img src='/data/icons/diagona/icon/16/031.png' /&&img src='/data/icons/diagona/icon/16/031.png' /&&img src='/data/icons/diagona/icon/16/031.png' /&&img src='/data/icons/diagona/icon/16/031.png' /&&img src='/data/icons/diagona/icon/16/031.png' /&&a style='text-decoration:color:#2679BA;float:right' target='_blank' href='http://www.'&详情&&&/a&&/div&");
// 创建信息窗口对象
四、效果图和源代码
看见了麼？数据是真实可靠的，并且我加上了自己的内容在里面。可以做评价、详情链接，甚至价格、图片等等。
源代码里，我加入了其他两家银行，让大家做个对比。
&html&&head&&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&&title&三家银行搜索&/title&&script type="text/javascript" src="http://api./api?v=1.2"&&/script&&/head&&body&&div style="width:520height:340border: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:right:100top:10"&&script type="text/javascript"&&!--
google_ad_client = "ca-pub-2025";
google_ad_slot = "";
google_ad_width = 180;
google_ad_height = 150;//--&&/script&&script type="text/javascript"
src="/pagead/show_ads.js"&&/script&&/div&&/body&&/html&&script type="text/javascript"&//查询完毕添加自定义标注function addMarker(results,point, index){
// 创建招商银行的标注图标
var zsIcon = new BMap.Icon("/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("/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("/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 = zsI
}else if(results.keyword == "中国银行"){
myIcon = zgI
}else if(results.keyword == "建设银行"){
myIcon = jsI
myIcon = zsI
var marker = new BMap.Marker(point.point, {icon: myIcon});
var infoWindow = new Window("&div style='line-height:1.8font-size:12'&&b&名称:&/b&"+point.title+"&/br&&b&地址:&/b&"+point.address+"&/br&&b&电话:&/b&"+point.phoneNumber+"&/br&&b&口碑：&/b&&img src='/data/icons/diagona/icon/16/031.png' /&&img src='/data/icons/diagona/icon/16/031.png' /&&img src='/data/icons/diagona/icon/16/031.png' /&&img src='/data/icons/diagona/icon/16/031.png' /&&img src='/data/icons/diagona/icon/16/031.png' /&&a style='text-decoration:color:#2679BA;float:right' target='_blank' href='http://www.'&详情&&&/a&&/div&");
// 创建信息窗口对象
marker.addEventListener("click",
function(){
marker.openInfoWindow(infoWindow);
map.addOverlay(marker);
//查询完毕的回调函数var searchComplete = function (results){
if (local.getStatus() != BMAP_STATUS_SUCCESS){
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&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}