首页 » CSS » 百度地图二次开发

百度地图二次开发

原文 http://blog.csdn.net/weixin_37839390/article/details/78229693

2017-10-13 21:20:03阅读(1335)

需求讲解:
所用技术:前端: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'>"
                        +"<tr>"   
                            +"<td>" + "牌号 : " + data.title + " </td>" + "</br>"
                        +"</tr>"
                        +"<tr>"   
                            +"<td>" + "用途 : " + data.car + " </td>" + "</br>"
                        +"</tr>"
                        +"<tr>"
                            +"<td>" + "经纬 : " + data.point + "</td>" + "</br>"
                        +"</tr>"
                        +"<tr>"
                            +"<td>" + "单位 : " + data.name + "</td>" + "</br>"
                        +"</tr>"
                        +"<tr>"
                            +"<td>" + "状态 : " + data.state + "</td>" + "</br>"
                        +"</tr>"
                        +"<tr>"   
                            +"<td>" + "速度 : " + 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();  

显示效果

百度地图二次开发

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹