需求讲解:
所用技术:前端: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 + "," +