解决百度地图批量转换坐标不能超过10个点的问题

直接附代码:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的AK"></script>
    <title>GPS坐标百度转换</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">

    var points = [
    new BMap.Point(116.697068,39.709336),
    new BMap.Point(116.697113,39.709204),
    new BMap.Point(116.697068,39.709069),
    new BMap.Point(116.697091,39.708934),
    new BMap.Point(116.697064,39.708795),
    new BMap.Point(116.697113,39.708538),
    new BMap.Point(116.697091,39.708531),
    new BMap.Point(116.697077,39.708399),
    new BMap.Point(116.697109,39.708264),
    new BMap.Point(116.697095,39.708136),
    new BMap.Point(116.697095,39.708136),
    new BMap.Point(116.697104,39.707865),
    new BMap.Point(116.697113,39.707747),
    new BMap.Point(116.697464,39.709718),
    new BMap.Point(116.697432,39.709572),
    new BMap.Point(116.697482,39.709447),
    new BMap.Point(116.697468,39.709315),
    new BMap.Point(116.697477,39.709180),
    new BMap.Point(116.697473,39.709048),
    new BMap.Point(116.697464,39.708902),
    new BMap.Point(116.697455,39.708791),
    new BMap.Point(116.697414,39.708653),
    new BMap.Point(116.697441,39.708524),
    new BMap.Point(116.697450,39.708379),
    new BMap.Point(116.697441,39.708396),
    new BMap.Point(116.697401,39.708132),
    new BMap.Point(116.697450,39.707987),
    new BMap.Point(116.697437,39.707830),
    new BMap.Point(116.697428,39.707730),
    new BMap.Point(116.697926,39.709749),
    new BMap.Point(116.697931,39.709614),
    new BMap.Point(116.697931,39.709614),
    new BMap.Point(116.697953,39.709340),
    new BMap.Point(116.697971,39.709208),
    new BMap.Point(116.697967,39.709076),
    new BMap.Point(116.697971,39.708937),
    new BMap.Point(116.697976,39.708823),
    new BMap.Point(116.697998,39.708673),
    new BMap.Point(116.697998,39.708545),
    new BMap.Point(116.697971,39.708420),
    new BMap.Point(116.697980,39.708275),
    new BMap.Point(116.697998,39.708157),
    new BMap.Point(116.697989,39.708007),
    new BMap.Point(116.697967,39.707879),
    new BMap.Point(116.697985,39.707758),
    new BMap.Point(116.698438,39.709718),
    new BMap.Point(116.698461,39.709586),
    new BMap.Point(116.698456,39.709461),
    new BMap.Point(116.698443,39.709322),
    new BMap.Point(116.698465,39.709183),
    new BMap.Point(116.698506,39.709180),
    new BMap.Point(116.698488,39.708920)  ];

    var newPoints=[];
    var bm = new BMap.Map("allmap");
    bm.centerAndZoom(new BMap.Point(116.697068,39.709336), 15);
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角,添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角,添加默认缩放平移控件
    bm.addControl(top_left_control);
    bm.addControl(top_left_navigation);

  //坐标转换的回调函数
    translateCallback = function (data){
      if(data.status === 0) {
        for (var i = 0; i < data.points.length; i++) {
      newPoints=newPoints.concat(data.points[i]);//将转换后的新坐标,添加到新的数组中。
        }
    ssi++;//标识符自增
    if(ssi<tenLength){//因为每次只能转10个点,判断数组中是否还存在多余的点,取代for循环,在回调中执行转换函数,保证前一次的坐标都添加到新数组中。
      zhuanhuan();
    }
    if(newPoints.length===points.length){//当转后和转前的坐标数组长度一致时,证明已经转完,进行画点操作
      huaPoint();
    }
      }
    }
  
  function huaPoint(){
    for (var i = 0; i < newPoints.length; i++) {
      if(i==0){
            bm.addOverlay(new BMap.Marker(newPoints[i]));
      }else if(i== newPoints.length-1){
            bm.addOverlay(new BMap.Marker(newPoints[i]));
      }else{
        bm.addOverlay(new BMap.Marker(newPoints[i]));
      }
            bm.setCenter(newPoints[i]);
        }
  }
  
  var pointsLength=points.length;//转换前点集的长度
  var tenLength=parseInt(pointsLength/10);//判断长度是10的几倍
  var tenMod=pointsLength%10;//对10取余数,如果大于零证明存在不是10的整数倍
  if (tenMod>0){
    tenLength=tenLength+1;
  }
  var ssi=0;//标识符,与tenLength进行比较判断是否调用zhuanhuan()方法
  
  //转坐标的函数
  function zhuanhuan(){
    if(pointsLength==0){//如果数组的长度是0,直接返回,即转换数组是空的。
      return;
    }
    var convertor = new BMap.Convertor();
    var start=parseInt(10*ssi);
    var end=parseInt(start+10);
    
    if(end>=pointsLength){//如果结束标识长度,大于整个数组长度时,将结束的长度赋值为数组的长度+1,保证每个值都能被去到。
      end=parseInt(pointsLength+1);
    }
    
    var arrys=points.slice(start, end);//取出原数组中即将被转化的点
    convertor.translate(arrys, 1, 5, translateCallback);//调用转换函数,并且调用translateCallback回调函数
  }
  
    setTimeout(zhuanhuan(), 1000);
</script>

实现效果图:
在这里插入图片描述
附主要参考链接:https://download.csdn.net/download/qq_35392674/10422804

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值