js使用百度api画轨迹

最近工作中使用到了javascript版本的百度地图api，需要把经纬度点连接成一条连续的轨迹。
正巧赶上了七夕，所以就想到在太平洋上画一个心，一起来看代码吧，代码很简单，重点是这些坐标点比较费时间

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <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">  
            html{height:100%}    
            body{height:100%;margin:0px;padding:0px}    
            #container{height:100%}    
        </style>
        <!-- 要注意 http 和 https 的问题 -->
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=sFbPfdhILLi8ReG51Svm2T7zS7kGcG5L"></script>
    </head>
    <body>
        <div id="container"></div> 
        <script type="text/javascript">
    var s = "132.2,20.20;131.7,20.20;131.2,20.20;130.7,20.70;130.2,20.70;129.7,20.70;129.2,21.20;128.7,21.20;128.2,21.20;127.7,21.70;127.2,21.70;126.7,21.70;126.2,22.20;125.7,22.20;125.2,22.20;124.7,22.70;124.2,22.70;123.7,22.70;123.2,23.20;122.7,23.20;122.2,23.20;121.7,23.70;121.2,23.70;120.7,23.70;120.2,24.20;119.7,24.20;119.2,24.20;118.7,24.70;118.2,24.70;117.7,24.70;117.2,25.20;116.7,25.20;116.2,25.20;115.7,25.70;115.2,25.70;114.7,25.70;114.2,25.70;113.7,25.70;113.2,25.70;113.7,26.20;114.2,26.70;113.7,26.20;113.2,25.70;113.7,25.20;114.2,24.70;113.7,25.20;113.2,25.70;113.7,25.70;114.2,25.70;114.7,25.70;115.2,25.70;115.7,25.70;116.2,25.20;116.7,25.20;117.2,25.20;117.7,24.70;118.2,24.70;118.7,25.20;119.2,25.70;119.7,25.70;120.2,25.20;120.7,24.70;121.2,24.20;121.7,24.70;122.2,25.20;122.7,25.70;123.2,25.70;123.7,25.20;124.2,24.70;124.7,24.20;125.2,24.70;125.7,25.20;126.2,25.70;126.7,25.70;127.2,25.20;127.7,24.70;128.2,24.20;128.2,23.70;127.7,23.20;127.2,22.70;126.7,22.20;126.2,21.70;125.7,21.20;125.2,20.70;124.7,20.20;124.2,20.70;123.7,21.20;123.2,21.70;122.7,22.20;122.2,22.70;121.7,23.20;121.2,23.70;121.7,23.20;122.2,22.70;122.7,22.20;122.7,21.70;122.2,21.20;121.7,20.70;121.2,20.20;120.7,20.70;120.2,21.20;119.7,21.70;119.2,22.20;118.7,22.70;118.2,23.20;117.7,23.70;117.7,24.20;118.2,24.70;118.7,25.20;119.2,25.70;119.7,25.70;120.2,25.20;120.7,24.70;121.2,24.20;121.2,23.70"

    var sArr = s.split(";");

    var data = [];
    for (var i = 0; i < sArr.length; i ++) {
        var obj = sArr[i];
        var ll = obj.split(",");
        var arr = [ll[0], ll[1]];
        data[data.length] = arr;
    }
            var points = [];  // 添加海量点数据
            for (var i = 0; i < data.length; i++) {
                points.push(new BMap.Point(data[i][0], data[i][1]));
            }
            var options = {
                size: BMAP_POINT_SIZE_SMALL,
                shape: BMAP_POINT_SHAPE_STAR,
                color: '#0f0'
            }
            var map = new BMap.Map("container");
            var point = new BMap.Point(points[Math.floor(points.length / 2)].lng,points[Math.floor(points.length / 2)].lat); 
            map.centerAndZoom(point, 8);  
            map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
            var polyline = new BMap.Polyline(points,options);  
            map.addOverlay(polyline);  // 添加Overlay
        </script>
    </body>
</html>

贴张整理经纬度的excel：
通过excel的各种公式拖拽出坐标

js使用百度api画轨迹

猜你喜欢