百度地图 baidu map api应用

Summary:

项目中需要使用百度地图来显示终端的位置。
1. 后台:获取存在数据库中的google gps地址,通过转换为baidu location,以json方式传到前端。
2. 前台:加载百度地图(开发者key/ak)和工具类TextIconOverlay和MarkerClusterer,通过:

  • 终端号直接搜索
  • 在线搜索/离线搜索/全部搜索
  • 范围搜索/距离

显示出终端并在地图上加载marker,给marker记载监听事件click,点击后打开infowindow信息窗口控件,控件内容由程序根据点的信息进行动态拼接,最终显示。

Question:

其中展示窗口时需要通过Geocoder类的getLocation来逆解析gps到省份和城市地址。本来放在marker的监听器(监听click事件)中进行加载,但由于此解析方法是异步函数,每次在展示窗口时省份城市信息并没有解析出来并加载到窗口中。

Answer:

后来详细查看了baidu map api,看到marker有一个infowindowopen事件,所以想到了可以在marker监听这个事件,在窗口显示时地址显示“正在加载…”,在监听事件中通过dom操作设置为返回的地址信息,实现友好加载。


Code Example:

html部分:

// 创建显示窗口,以便代码重用
function showMessage(array) {

        return    $(
                        ""
                                +"<div class='ui-bmap-div'>"
                                + "<table align='center' width='500px'>"
                                //+ "<caption><img src='logo.png' width='100px' height='30px'/></caption>"
                                + "<tr><td>终&nbsp;端&nbsp;组:&nbsp;</td><td>" + array[2] + "</td></tr>"
                                + "<tr><td>终&nbsp;&nbsp;&nbsp;&nbsp;端:</td><td>" + array[0] + "</td></tr>"
                                + "<tr><td>地&nbsp;&nbsp;&nbsp;&nbsp;址:</td><td id='maploc'>" + "加载中..." + "</td></tr>"
                                + "<tr><td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td></tr>"
                                + "<tr>"
                                + "<td colspan='2' >"
                                + "<a href='terminal-map-manage.action?filter_LIKES_sn="+ array[1]  + "' target='_blank' >终端管理</a>"
                                + "<a href='terminal-map-manage.action?filter_LIKES_terminal-sn="+ array[1] + "' style='float:right;' target='_blank'>终端监控</a>"
                                + "</td> </tr> </table> </div>").get(0);

}

js部分:

// 注册监听器 实现点击marker来打开窗口
                marker.addEventListener("click", function(e) {
                    var array = this.getTitle().split(",");
//showMessage(array)返回需要展现的窗口dom
                    this.openInfoWindow(new BMap.InfoWindow(showMessage(array)));
                });

//通过监听open事件实现异步加载省份和城市
                marker.addEventListener("infowindowopen", function(e){
                    var myGeo = new BMap.Geocoder();   
                    myGeo.getLocation(e.target.point, function(result){      
                         if (result){

//$("#maploc")为地址信息对应的dom                      
$("#maploc").html(result.addressComponents.province+" "+ result.addressComponents.city);
                          }      
                    });   

                });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值