百度地图二次开发

本文介绍了使用HTML、CSS、JavaScript、jQuery和Ajax进行百度地图的二次开发,详细阐述了如何异步加载地图并动态更新图标,以及解决去掉默认标注、处理函数调用和图片路径等问题,展示了自定义弹窗样式和卫星地图切换的功能实现。
摘要由CSDN通过智能技术生成

需求讲解:
所用技术:前端: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 + "," +
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值