原文:
摘要：
上一章留个悬念，"如果自己没有地理坐标的数据库，应该怎样制作银行的分布地图呢？"
答案就是，利用百度地图上的数据。
----------------------------------------------------------------------------------------------
我们不用花大把时间写代码去跑数据，只需要利用百度地图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 = 0 ; 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 >