百度地图api批量转换坐标

百度地图官网提供的坐标批量转换

<script type="text/javascript">



    var points = [new BMap.Point(116.3786889372559,39.90762965106183),
                  new BMap.Point(116.38632786853032,39.90795884517671),
                  new BMap.Point(116.39534009082035,39.907432133833574),
                  new BMap.Point(116.40624058825688,39.90789300648029),
                  new BMap.Point(116.41413701159672,39.90795884517671)
    ];


    //地图初始化
    var bm = new BMap.Map("allmap");
    bm.centerAndZoom(new BMap.Point(116.378688937,39.9076296510), 15);


    //坐标转换完之后的回调函数
    translateCallback = function (data){
      if(data.status === 0) {
        for (var i = 0; i < data.points.length; i++) {
            bm.addOverlay(new BMap.Marker(data.points[i]));
            bm.setCenter(data.points[i]);
        }
      }
    }
    setTimeout(function(){
        var convertor = new BMap.Convertor();
        convertor.translate(points, 1, 5, translateCallback)
    }, 1000);

</script>、

函数可以嵌套调用但不能嵌套定义

自己写的

<script type="text/javascript">
//创建Map实例 
var map = new BMap.Map("allmap");

//设置地图中心点和缩放级别
map.centerAndZoom(new BMap.Point(116.47496938705444, 39.873154043017784), 15);
//设置地图显示当前城市
map.setCurrentCity("北京");
map.addControl(new BMap.MapTypeControl()); //设置可拖拽 
map.enableScrollWheelZoom(true); //添加滚轮缩放   
//页面四周的控件添加
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());



index=0;
/*
批量一次只能传十个  给百度   callbackUrl会返回一个返回值 里面是一个数组  ,由于没有标志位,只能传过去一批等他解析完后存储下来,再传接下来的数据。
回调函数  这里用了一个递归,递归的出口是数据比index大的时候,
*/
translateCallback = function(arr) {
for (var i = 0; i < arr.points.length; i++) {

//添加覆盖物函数   函数在下面调用 。
addMarker(arr.points[i], contents[index+i],icons[index+i]);
console.log(index+i);//打印日志
//先解析   再添加
}
index+=10;
addmarkbatch();//解析函数  循环在解析里面 策略是  批量解析一批,接受后在解析一批,
}

function addmarkbatch()
{
var leftpoints=points.length-index;
if(leftpoints<=0)return;
var to=(leftpoints>10)? 10:leftpoints;

var convertor = new BMap.Convertor();

var pointss=new Array(to);
for(var i=0;i<to;i++)pointss[i]=points[i+index];

debugger
convertor.translate(pointss,1,5, translateCallback); //arr 声明数组
}
//先进入start(objs)读取数据
function start(objs) {
//表格有10行


//解析数据串
points=new Array(objs.length); //新建一个数组  长度是 全局数组
contents=new Array(objs.length);
icons=new Array(objs.length);

for (var i = 0; i < objs.length; i++) {
point = new BMap.Point(objs[i].lng, objs[i].lat);
points[i]=point;
devLocation = objs[i].devLocation;
name = objs[i].deviceName;
temperature = objs[i].temperature;
status = objs[i].status;

content = doContent(objs[i].id, temperature, name, devLocation);
var icon;
//设备不在线
if (status == 0) {
icon = new BMap.Icon("../images/status_gray.png",
new BMap.Size(22, 25));
} else if (temperature >= 40) {
icon = new BMap.Icon("../images/status_red.png",
new BMap.Size(22, 25));
} else {
icon = new BMap.Icon("../images/status_green.png",
new BMap.Size(22, 25));
}


//转换函数

//创建覆盖物 图标等
//addMarker(point, content, icon);
contents[i]=content;
icons[i]=icon;
//saddMarker(point, content, icon);


} //for循环



index=0;
addmarkbatch(index);


} //start objs方法



/* var objs2 = [{"id":1,"lat":"39.873154043017784","lng":"116.47496938705444","status":"0","temperature":"25"},{"id":2,"lat":"39.874154043017784","lng":"116.47596938705433","status":"1","temperature":"25"},{"id":3,"lat":"39.873554043017774","lng":"116.47896938705433","status":"1","temperature":"52"}];
} */
$.ajax({
type : "post",
async : true,
url : "${pageContext.request.contextPath}/device/receiveDevicedata",
data : {},
dataType : "text",
success : function(backData) {
objs1 = backData;
objs = JSON.parse(objs1);
start(objs);





//进行echarts数据操作
},
error : function(errorMsg) {
//请求图标失败
alert("上传错误,未能上传到服务器");
}
});
//var objs = [{"id":1,"lat":"39.873154043017784","lng":"116.47496938705444","status":"0","temperature":"25"},{"id":2,"lat":"39.874154043017784","lng":"116.47596938705433","status":"1","temperature":"25"},{"id":3,"lat":"39.873554043017774","lng":"116.47896938705433","status":"1","temperature":"52"}];


//自定义一个函数用于拼接显示内容  
function doContent(id, temperature, name,devLocation) {
return "<ul style=\"margin:0 0 5px 0;padding:0.2em 0\"><li style=\"line-height: 26px;font-size: 15px;\"><span style=\"width: 50px;display: inline-block;\">名称:</span>"
+ name
+  "</li><li style=\"line-height: 26px;font-size: 15px;\"><span style=\"width: 50px;display: inline-block;\">位置:</span>"
+ devLocation
+ "</li><li style=\"line-height: 26px;font-size: 15px;\"><span style=\"width: 50px;display: inline-block;\">温度:</span>"
+ temperature
+ "</li><li style=\"line-height: 26px;font-size: 15px;\"><span style=\"width: 50px;display: inline-block;\">查看:</span><a href=\"${pageContext.request.contextPath}/device/deviceDetail?deviceId="
+ id + "\">详情</a></li></ul>";
}


// 自定义函数,创建标注 添加覆盖物 等其他信息 
function addMarker(point, content, icon) {
var marker = new BMap.Marker(point, {
icon : icon
});


//var infoWindow = new BMap.InfoWindow(sContent);   
var infoWindow = new BMap.InfoWindow(content);
map.addOverlay(marker);
marker.addEventListener("click", function() {
this.openInfoWindow(infoWindow);
//图片加载完毕重绘infowindow  
document.getElementById('imgDemo').onload = function() {
infoWindow.redraw(); //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏  
};
});
}
</script>


©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页