百度地图绘制轨迹点-夏末浅笑

后端php返回json数据
public function check_ajax(){
        if(request()->isAjax()){
            $phone_str = $this->request->post('phone_str');
            $start_time = $this->request->post('start_time');
            $end_time = $this->request->post('end_time');
            $phone = substr($phone_str,7);
            $data0 = Db::name('ship') -> where(['phone' => $phone]) ->select();
            foreach ($data0 as $key => $value){
                $id = $value['id'];
            }
            //条件查询
            $map['cmf_ship.id'] = ['=',"$id"];
            $map['cmf_locus.time'] = array('between',array("$start_time","$end_time"));
            $map['cmf_locus.position'] = ['=',"定位"];
            $map['cmf_locus.alarm'] = ['=',"一切正常"];
            $data = Db::name('locus')
                ->alias('a')
                ->join('cmf_ship b','a.ship_id = b.id','left')
                ->field('a.id,a.time,a.ship_id,a.latitude,a.longitude,a.speed,a.height,a.direction,b.id,b.phone,b.captain,b.name')
                ->where($map)
                ->order('time' )
                ->select();
            return $data ;
        }
    }

前端html代码
<head>
    <title>百度</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=地图密钥"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>

前端js代码
点击通过ajax获取数据
$("#btn").click(function () {
      $(".bottom_div").hide();
      var phone_str = $("#phone").text();
      var start_time = $("#start").val();
      var end_time = $("#end").val();
      var jsonData = {
            "phone_str": phone_str,
            "start_time": start_time,
            "end_time": end_time
      };
      $.post("{:url('Main/check_ajax')}", jsonData, function (data) {
            trackCheck(data);
      }, 'json');
})

地图轨迹js代码
<script>
    //GPS坐标转换成火星坐标
    var M_PI = 3.14159265358979324;
    var a = 6378245.0;
    var ee = 0.00669342162296594323;
    var x_pi = M_PI * 3000.0 / 180.0;

    function wgs2gcj_lat(x, y) {
        var ret1 = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
        ret1 += (20.0 * Math.sin(6.0 * x * M_PI) + 20.0 * Math.sin(2.0 * x * M_PI)) * 2.0 / 3.0;
        ret1 += (20.0 * Math.sin(y * M_PI) + 40.0 * Math.sin(y / 3.0 * M_PI)) * 2.0 / 3.0;
        ret1 += (160.0 * Math.sin(y / 12.0 * M_PI) + 320 * Math.sin(y * M_PI / 30.0)) * 2.0 / 3.0;
        return ret1;
    }

    function wgs2gcj_lng(x, y) {
        var ret2 = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
        ret2 += (20.0 * Math.sin(6.0 * x * M_PI) + 20.0 * Math.sin(2.0 * x * M_PI)) * 2.0 / 3.0;
        ret2 += (20.0 * Math.sin(x * M_PI) + 40.0 * Math.sin(x / 3.0 * M_PI)) * 2.0 / 3.0;
        ret2 += (150.0 * Math.sin(x / 12.0 * M_PI) + 300.0 * Math.sin(x / 30.0 * M_PI)) * 2.0 / 3.0;
        return ret2;
    }

    function wgs2gcj(lat, lng) {
        var poi2 = {};
        var dLat = wgs2gcj_lat(lng - 105.0, lat - 35.0);
        var dLon = wgs2gcj_lng(lng - 105.0, lat - 35.0);
        var radLat = lat / 180.0 * M_PI;
        var magic = Math.sin(radLat);
        magic = 1 - ee * magic * magic;
        var sqrtMagic = Math.sqrt(magic);
        dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * M_PI);
        dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * M_PI);
        poi2.lat = lat + dLat;
        poi2.lng = lng + dLon;
        return poi2;
    }

    //火星坐标转百度坐标
    function gcj2bd(lat, lng) {
        var poi2 = {};
        var x = lng,
            y = lat;
        var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
        var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
        poi2.lng = z * Math.cos(theta) + 0.0065;
        poi2.lat = z * Math.sin(theta) + 0.006;
        return poi2;
    }
</script>
<script>
    function Position1(res) {
        var last_point = 0.0;
        var data_info = [];   //标注信息数组
        var position = [];
        var res_leng = res.length;
        var tmp = "";
        for (i = 0; i < res_leng; i++) {
            var angle = 0;
            var t;
            t =  wgs2gcj(res[i]['latitude'], res[i]['longitude']);
            tmp = gcj2bd(t.lat, t.lng);
            lat_bd = tmp.lat.toFixed(6);
            lng_bd = tmp.lng.toFixed(6);
            point = new BMap.Point(lng_bd, lat_bd);
            if (i !== 0){
                t = wgs2gcj(res[i-1]['latitude'], res[i-1]['longitude']);
                var tmp0 = gcj2bd(t.lat, t.lng);
                lat_bd0 = tmp.lat.toFixed(6);
                lng_bd0 = tmp.lng.toFixed(6);
                point0 = new BMap.Point(lng_bd0, lat_bd0);
                angle = getAngle2(getAngle(tmp,tmp0));
            }
            last_point = point
            //标注信息
            data_info[i] = [
                lng_bd,
                lat_bd,
                "里程:" + res[i]['nm'] + "nm" + "<br/>经度:" + lng_bd + "  " + "纬度:" + lat_bd + "<br/>时间:" + res[i]['time'] + "<br/>速度:" + res[i]['speed'] + "nm/h" + "<br/>方向:" + angle + "度"
            ];
            position.push(point);
        }
        addLine(position, data_info,res);
    }
    //划线
    function addLine(position, data_info,res) {
        var polyline = new BMap.Polyline(position, {
            strokeColor: "red", //设置颜色
            strokeWeight: 2, //宽度
            strokeOpacity: 0.8 //透明度
        });
        map.addOverlay(polyline);
        addMarker(position, data_info,res);
    }
    //画点
    function addMarker(position, data_info,res) {
        //方向箭头
        var positiomSize = position.length - 1;
        for (var i = positiomSize; i > 0; i--) {
            var angle = getAngle(position[i], position[i - 1]);
            drawMarker(position[i], angle);
        }
        //标注信息窗口显示
        var opts = {
            width: 100, // 信息窗口宽度
            height: 100, // 信息窗口高度
            enableMessage: true //设置允许信息窗发送短息
        };
        var info_len = data_info.length;
        for (var i = 0; i < info_len; i++) {
            var path = "__STATIC__/images";
            var myIcon = new BMap.Icon(path + "/" + "round.png", new BMap.Size(10, 10), {
                anchor: new BMap.Size(5, 5), // 指定定位位置
                imageOffset: new BMap.Size(0, 0) // 设置图片偏移
            });
            if (data_info[i][0] == data_info[0][0] || data_info[i][1] == data_info[0][0]) {
                var marker = new BMap.Marker(new BMap.Point(data_info[0][0], data_info[0][1]));
                var label = new BMap.Label("起点", {
                    offset: new BMap.Size(15, -25)
                });
                label.setStyle({
                    width: "30px",
                    textAlign: "center",
                    height: "20px",
                    lineHeight: "20px",
                    maxWidth: "none"
                });
                marker.setLabel(label);
            } else if (data_info[i][0] == data_info[data_info.length - 1][0] || data_info[i][1] == data_info[data_info.length - 1][0]) {
                var marker = new BMap.Marker(new BMap.Point(data_info[data_info.length - 1][0], data_info[data_info.length - 1][1]));
                var label = new BMap.Label("终点", {
                    offset: new BMap.Size(15, -25)
                });
                label.setStyle({
                    width: "30px",
                    textAlign: "center",
                    height: "20px",
                    lineHeight: "20px",
                    maxWidth: "none"
                });
                marker.setLabel(label);
            } else {
                var marker = new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]), {
                    icon: myIcon
                }); // 创建标注
                 //每个点的时间做成label
                /*var label = new BMap.Label(res[i]['time'], {
                    offset: new BMap.Size(0, -25)
                });
                label.setStyle({
                    width: "120px",
                    textAlign: "center",
                    height: "20px",
                    lineHeight: "20px",
                    maxWidth: "none"
                });
                marker.setLabel(label);*/
            }
            var content = data_info[i][2];
            map.addOverlay(marker); // 将标注添加到地图中
            addOnmouseoverHandler(content, marker);
        }

        function addOnmouseoverHandler(content, marker) {
            marker.addEventListener("onmouseover", function (e) {
                openInfo(content, e)
            });
        }
        function openInfo(content, e) {
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            var infoWindow = new BMap.InfoWindow(content, opts); //创建信息窗口对象
            map.openInfoWindow(infoWindow, point);
        }
    }
    function trackCheck(rew) {
        var req = rew;
        showMap(req);
        Position1(req);
    }
</script>

作者：捞月亮的小猴子
链接：https://www.jianshu.com/p/878e0dfb4135
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

文章版权归作者所有，未经允许请勿转载。

THE END