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

摘要：

　　上一章留个悬念，"如果自己没有地理坐标的数据库，应该怎样制作银行的分布地图呢？"

　　答案就是，利用百度地图上的数据。

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

我们不用花大把时间写代码去跑数据，只需要利用百度地图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，这里要设置一下。以前写过这个点，这里就不多说了。

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

运行代码，请点击这里。

最后，贴出全部源代码，供大家下载。

//查询完毕添加自定义标注 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),     // 标注底部小尖尖的偏移量                     p_w_picpathOffset: 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),     // 标注底部小尖尖的偏移量                     p_w_picpathOffset: 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),     // 标注底部小尖尖的偏移量                     p_w_picpathOffset: 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('建设银行'); }