百度地图二次开发

需求讲解：
所用技术：前端：html+css+js+jquery+ajax
后端：.net
异步加载百度地图，从后台获取的图标动态的更新到百度地图上，当点击图标时弹出弹框，不使用百度地图的默认弹窗，自定义其样式

遇到的问题：

1、百度地图去掉默认的标注

.BMap_cpyCtrl  {      display:none;   } .anchorBL {    display:none;   }

2、百度地图中的方法不能放在函数里面，要在全局下定义使用；通过函数调用的方式来执行ajax中的内容
3、eval()可以将字符串以对象的形式显示使用

if(result) {     var info = eval(data.Info);      depDivContentRealTime(info);           }

4、如果项目中有需求要使用到卫星地图的时候，百度地图有其自身的控件可以直接切换卫星地图
5、想把值推入到markers数组中的时候，利用push方法，markers.push(marker);
6、前端在显示后台图片的时候，图片中尽量不要出现中文名，这样会导致图片无法出来，但是在浏览器上拼接路径可以查看图片
7、前端在调用接口的时候，如果是多个字符串，要用.[i]来获取数据

代码展示

function  confirm(){    var cars='';     var jsonData = {"UserId":2019,"GUID":"bf504650-9ac1-4fa2-9f05-f61a463496f6","DeptId":21}    $.ajax({        url: '',         type: 'post',        data: {            "para" : JSON.stringify(jsonData)        },        dataType: 'json',        async:false,        success: function(data) {            console.log(data);            var result = data.Result;            if(result) {                var info = eval(data.Info);                 cars =  depDivContentRealTime(info);             }        }    })    return cars; }function depDivContentRealTime(data) {    var str = "";    var fun = "";    for (var i = 0; i < data.length; i++) {        if (data[i].type == "dep") {            str += depDivContentchildRealTime(data[i].children);        }else if(data[i].type == "car"){            if (data[i].ChildDepId != null) {                fun += "{"+ "id:" +children[i].id + "," +" text:"+ children[i].text + "," +"centerOrdinate:"+ children[i].centerOrdinate + "," + unescape(+"ChildDepId0:"+ children[i].ChildDepId.split('|')[0]+","+"ChildDepId1:"+ children[i].ChildDepId.split('|')[1]+"," +"ChildDepId3:"+ children[i].ChildDepId.split('|')[3]+"," +"ChildDepId4:"+ children[i].ChildDepId.split('|')[4]+"," +"ChildDepId5:"+ children[i].ChildDepId.split('|')[5]+","+"ChildDepId7:"+ children[i].ChildDepId.split('|')[7])+"}";               }        }    }    str +=fun;    return str;}function depDivContentchildRealTime(children) {    var str = "";    var fun = "";    for (var i = 0; i < children.length; i++) {        if (children[i].type == "dep") {          str += depDivContentchildRealTime(children[i].children);        } else if(children[i].type == "car"){            if (children[i].ChildDepId != null) {                   fun += "{ title: "+'"'+children[i].text+'"'+", point: "+'"'+children[i].centerOrdinate+'"'+",car:"+'"'+children[i].ChildDepId.split('|')[1]+'"'+",icons:"+'"'+children[i].ChildDepId.split('|')[3]+'"'+", derection: "+'"'+children[i].ChildDepId.split('|')[4]+'"'+", name: "+'"'+children[i].ChildDepId.split('|')[7]+'"'+", state: "+'"'+children[i].ChildDepId.split('|')[12]+'"'+", imgs: "+'"'+ unescape(children[i].ChildDepId.split('|')[5])+'"'+", spead: "+'"'+children[i].ChildDepId.split('|')[6]+'"'+", days: "+'"'+children[i].ChildDepId.split('|')[8]+'"'+", carid: "+'"'+children[i].ChildDepId.split('|')[0]+'"'+"};";            }        }    }    str += fun;    return str;}function trims(str){      return str.replace(/\//g,"-");  } // 地图部分var markerArr = confirm().split('};');var markers=[];var pt = null;var map; //Map实例  function map_init() {      map = new BMap.Map("map");      //第1步：设置地图中心点，北京     var point = new BMap.Point(116.355625000,40.078874470);      map.enableScrollWheelZoom();    // map.disableDoubleClickZoom();    window.addEventListener(function(){         FastClick.attach( document.body );    },false );    //添加地图类型控件    map.addControl(new BMap.MapTypeControl());    //初始化地图,设置中心点坐标和地图级别。      map.centerAndZoom(point, 16);      //向地图中添加缩放控件      var ctrlNav = new window.BMap.NavigationControl({          anchor: BMAP_ANCHOR_TOP_LEFT,         type: BMAP_NAVIGATION_CONTROL_LARGE      });      map.addControl(ctrlNav);    //绘制点        for (var i = 0; i < markerArr.length-1; i++) {          var obj = eval("("+markerArr[i]+"}"+")");        var p0 = obj.point.split(",")[0];         var p1 = obj.point.split(",")[1];          var myIcon = new BMap.Icon("http://119.29.218.203:60/"+obj.icons,        new BMap.Size(72, 39));        var marker= new BMap.Marker(new BMap.Point(p0,p1),{icon:myIcon});        marker.setRotation(obj.derection);//旋转角度        addClickHandler(divContent(obj), marker);//弹窗，字符串和标注        markers.push(marker);    }    var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});  }/** * 监听及弹出内容 * @param {*} content  * @param {*} marker  */function addClickHandler(content, marker) {    marker.addEventListener("click", function (e) {        openInfo(content, e)    });}function divContent(data){     // console.log(data.carid)    var str = "<div class='car_details'>"                    +"<div class='title'>"+ data.title + "</div>"                    +"<div class='time'>" + data.days +"</div>"                    +"<div class='btn'>"                        +"<a href='#' class='b1' onclick=open_panorama('"+data.point.split(',')[0]+"','"+data.point.split(',')[1]+"')><i class='iconfont icon-ziyuan'></i>街景</a>"                        +"<a href='#' class='b2'><i class='iconfont icon-shipin'></i>视频</a>"                        +"<a href='#' class='b3'><i class='iconfont icon-youhaofenxi'></i>油耗</a>"                        +"<a href='#' class='b4'><i class='iconfont icon-guiji'></i>轨迹</a>"                        +"<a href='#'' class='b5'><i class='iconfont icon-chexiaofeijilu-jiayou'></i>加油记录</a>"                    +"</div>"                    +"<div class='states' style='padding-left:16px'>"                        +"<tr>"                               +"<td style='vertical-align:top;line-height:16px'>" + "牌号 : " + data.title + " </td>" + "</br>"                        +"</tr>"                        +"<tr>"                               +"<td style='vertical-align:top;line-height:16px'>" + "用途 : " + data.car + " </td>" + "</br>"                        +"</tr>"                        +"<tr>"                            +"<td style='vertical-align:top;line-height:16px'>" + "经纬 : " + data.point + "</td>" + "</br>"                        +"</tr>"                        +"<tr>"                            +"<td style='vertical-align:top;line-height:16px'>" + "单位 : " + data.name + "</td>" + "</br>"                        +"</tr>"                        +"<tr>"                            +"<td style='vertical-align:top;line-height:16px;word-wrap: break-word'>" + "状态 : " + data.state + "</td>" + "</br>"                        +"</tr>"                        +"<tr>"                               +"<td style='vertical-align:top;line-height:16px'>" + "速度 : " + data.spead + " km/h" +" </td>" + "</br>"                        +"</tr>"                    +"</div>"                    +"<div class='footer' onclick='clo_car_details()'>关闭</div>";            +"</div>";    return str;   }function clo_car_details() {    $('.car_details').css('display','none');}/**         * 弹窗 位置及特效         * @param content         * @param e         */function openInfo(content, e) {    $("#popup").html(content);        var top = ($(window).height() - $("#popup").height())/7;           var left = ($(window).width() - $(".car_details").width())/2;        // console.log(left);         var scrollTop = $(document).scrollTop();           var scrollLeft = $(document).scrollLeft();           $("#popup").css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();  

显示效果