解決百度地圖批量轉換座標不能超過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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章