根据展示类型划分

这几天因为工作需要，需要将原google地图改为百度地图，因此研究了一下百度地图API，略有心得，同大家分享，若有不当之处还望大家指正。
工作中的百度地图需求主要包含单点展示和多点展示两部分，因为方法略有不同，主要难点在于经纬度获取地址信息时，涉及回调函数的次序问题。这里采用了前端Promise…then…的形式，源码及解释如下。

单点地图展示及地图信息展示

单点展示方法相对简单，在百度注册ak后，按照demo加载好请求头后，具体展示代码及解释如下：

<script type="text/javascript">//创建地图模块var map = new BMapGL.Map("container");//创造单点var point = new BMapGL.Point(${longitude}, ${latitude});// 创建点坐标map.centerAndZoom(point, 18);var marker = new BMapGL.Marker(point);map.addOverlay(marker);//创建地址解析器var geoc = new BMapGL.Geocoder();var address="";var addComp="";geoc.getLocation(point, function (rs) {//调用百度地图回调函数debuggeraddComp = rs.addressComponents;address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;var opts = {width : 300,     // 信息窗口宽度height: 100,     // 信息窗口高度title : '${customer}'+'(' + ${meterNo} + ')' , // 信息窗口标题enableMessage:true,//设置允许信息窗发送短息message:''}var str = "地址："+address;var infoWindow = new BMapGL.InfoWindow(str, opts);  // 创建信息窗口对象marker.addEventListener("click", function(){//创建监听map.openInfoWindow(infoWindow,point); //开启信息窗口});})</script>

多点地图展示及地图信息展示

多点展示不能按照传统单点获取地址，再弹出信息框的形式获取，因为每个点都需要用经纬度调用百度地图API接口，由于回调函数时间不一定，所以需要采用Promise…then的形式，将所有的回调值都获取到后，再在then中完成展示逻辑。
这里需要注意的是，addClickHandler()和openInfo()作为监听器，尽可能写在函数外调用，这样可以确保所有的信息都加载入监听器中。

<script type="text/javascript">var geoc = new BMapGL.Geocoder();//将所有点的经纬度等其他信息获取var mapPoints = ${rows};// var mapPoints = [{longitude:42.542,latitude:53.5323,customerName:'统大爷',meterNo:'a11aa'},//     {longitude:23.5323,latitude:53.532,customerName:'西瓜乐',meterNo:'2222'},//     {longitude:12.5233,latitude:54.2343,customerName:'小金金',meterNo:'32451'},//     {longitude:54.2343,latitude:53.234,customerName:'金老板',meterNo:'57545'}];var points = []for (var j=0;j<mapPoints.length;j++){var p = new BMapGL.Point(mapPoints[j].longitude,mapPoints[j].latitude);//创建坐标点points.push(p)}var view = map.getViewport(eval(points));var mapZoom = view.zoom;var centerPoint = view.center;map.centerAndZoom(centerPoint,mapZoom)for(var i =0;i<points.length;i++){var markers = new BMapGL.Marker(points[i]);map.addOverlay(markers);}// 函数 创建多个标注function markerFun (points) {var markers = new BMapGL.Marker(points);map.addOverlay(markers);}dealMapPoints();//地图定位异步回调function getLocations(points,index,resolve) {geoc.getLocation(points, function (rs) {// var marker = new BMapGL.Marker(points);var addComp = rs.addressComponents;var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;mapPoints[index].loc=address//回调函数表示成功的标志resolve()})}//处理点同步function dealMapPoints() {var promises = new Array();for (var i = 0;i<mapPoints.length;i++) {var points = new BMapGL.Point(mapPoints[i].longitude,mapPoints[i].latitude);//创建坐标点markerFun(points);//创建promise，给每一个回调函数都创建一个var promise = new Promise(function (resolve) {getLocations(points,i,resolve);})promises.push(promise)}//将子回调函数全部放入到一个Promise组中var p = Promise.all(promises);//所有回调函数完成执行代码p.then(function () {debuggerfor(var i=0;i<mapPoints.length;i++){var point = new BMapGL.Point(mapPoints[i].longitude,mapPoints[i].latitude);//创建坐标点var marker = new BMapGL.Marker(point);var loc = "地址："+mapPoints[i].loc;var opts = {width : 300,     // 信息窗口宽度height: 100,     // 信息窗口高度title : mapPoints[i].customerName+'(' + mapPoints[i].meterNo + ')' , // 信息窗口标题enableMessage:true,//设置允许信息窗发送短息message:''}map.addOverlay(marker);addClickHandler(loc,marker,opts);}})}//信息框监听器function addClickHandler(content,marker,opts){marker.addEventListener("click",function(e){openInfo(content,e,opts)});}//信息展示function openInfo(content,e,opts){var p = e.target;var point = new BMapGL.Point(p.getPosition().lng, p.getPosition().lat);var infoWindow = new BMapGL.InfoWindow(content,opts);  // 创建信息窗口对象map.openInfoWindow(infoWindow,point); //开启信息窗口}</script>

由于作者水平有限，对百度地图的研究如上所示，对于信息展示框的改造，采用的百度地图官方给的api，大家也可以嵌套完成，如有疑问欢迎大家共同交流。