百度地图 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);
                          }      
                    });   

                });