后端返回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"));
$data = Db::name('locus')
->alias('a')
->join('cmf_ship b','a.ship_id = b.id','left')
->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獲取數(shù)據(jù)
$("#btn_restart").click(function () {
$(".bottom_div").show();
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) {
trackRestart(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 type="text/javascript">
var interval = 1000;
var is_stop_draw_track = false;
function showMap(res) {
//var res = rew; //后臺傳值
var req = res;
var lat_bd_center = [];
var lng_bd_center = [];
var lat_gcj_center = [];
var lng_gcj_center = [];
if (!req.length) {
alert("沒有軌跡信息");
}
lat_gcj_center[1] = wgs2gcj(req[1].latitude, req[1].longitude).lat;
lng_gcj_center[1] = wgs2gcj(req[1].latitude, req[1].longitude).lng;
lat_bd_center[1] = gcj2bd(lat_gcj_center[1], lng_gcj_center[1]).lat.toFixed(6);
lng_bd_center[1] = gcj2bd(lat_gcj_center[1], lng_gcj_center[1]).lng.toFixed(6);
map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(lng_bd_center[1], lat_bd_center[1]), 12); // 初始化地圖,設置中心點坐標為起點坐標
map.enableScrollWheelZoom(); //啟用滾輪放大縮小
//添加地圖類型控件
map.addControl(new BMap.MapTypeControl({
mapTypes: [
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]
}));
map.setCurrentCity("深圳"); // 設置地圖顯示的城市 此項是必須設置的
// 添加帶有定位的導航控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE類型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 啟用顯示定位
enableGeolocation: false
});
map.addControl(navigationControl);
}
function Position(res) {
var last_point = 0.0;
var data_info = []; //標注信息數(shù)組
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));
}
if (last_point != 0.0) {
last_point = point;
//總里程
var text = res[res_leng - 1]['nm'];
}
last_point = point;
//標注信息
data_info[i] = [
lng_bd,
lat_bd,
"里程:" + res[i]['nm'] + "nm" + "<br/>經(jīng)度:" + lng_bd + " " + "緯度:" + lat_bd + "<br/>時間:" + res[i]['time'] + "<br/>速度:" + res[i]['speed'] + "nm/h" + "<br/>方向:" + angle + "度" + "<br/>定位方式:" + res[i]['gps']
];
position.push(point);
}
$(".num_span").text(text);
$("#Newsdiv").show();
drawPolyLine0Var.drawPolyLine0(position, 0, data_info);
}
function getAngle(pt1, pt2) {
return Math.atan2(pt1.lat - pt2.lat, pt1.lng - pt2.lng);
}
function drawMarker(position, angle) {
var iconImg = createIcon(angle);
var marker = new BMap.Marker(position, {
icon: iconImg
});
map.addOverlay(marker);
return marker
}
function getAngle2(angle) {
//return: -PI to PI
//從負Y軸方向開始順時針查找角度
var adjAngles = [180, 202, 225, 247, 270, 292, 315, 337, 0, 22, 45, 67, 90, 112, 135, 157];
adjAngle = angle;
var adjIndex = 0;
for (var i = 0; i < 16; i++) {
if (adjAngle < (-15 / 16 + i / 8) * Math.PI) {
adjIndex = i;
break;
}
}
return adjAngles[adjIndex];
}
function createIcon(angle) {
//return: -PI to PI
//從負Y軸方向開始順時針查找角度
var adjAngles = [180, 202, 225, 247, 270, 292, 315, 337, 0, 22, 45, 67, 90, 112, 135, 157];
adjAngle = angle;
var adjIndex = 0;
for (var i = 0; i < 16; i++) {
if (adjAngle < (-15 / 16 + i / 8) * Math.PI) {
adjIndex = i;
break;
}
}
var path = "__STATIC__/images";
icon = new BMap.Icon(path + "/" + "sp_" + adjAngles[adjIndex] + ".png", new BMap.Size(20, 20));
return icon;
}
var drawPolyLine0Var = {
addOnmouseoverHandler: function (content, marker, opts) {
marker.addEventListener("onmouseover", function (e) {
drawPolyLine0Var.openInfo(content, e, opts)
});
},
openInfo: function (content, e, opts) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content, opts); //創(chuàng)建信息窗口對象
map.openInfoWindow(infoWindow, point);
},
drawPolyLine0: function (coors, index, data_info) {
console.log(coors.length);
console.log(data_info.length);
var count = coors.length - 1;
var marker;
var content;
//標注信息窗口顯示
var opts = {
width: 100, // 信息窗口寬度
height: 120, // 信息窗口高度
enableMessage: true //設置允許信息窗發(fā)送短息
};
if (index === 0) {
var label = new BMap.Label("起點", {
offset: new BMap.Size(15, -25)
});
label.setStyle({
width: "30px",
textAlign: "center",
height: "20px",
lineHeight: "20px",
maxWidth: "none"
});
marker = new BMap.Marker(new BMap.Point(data_info[index][0], data_info[index][1]));
marker.setLabel(label);
map.addOverlay(marker); // 將標注添加到地圖中
content = data_info[0][2];
drawPolyLine0Var.addOnmouseoverHandler(content, marker, opts);
}
if (index !== count ) {
if (!is_stop_draw_track) {
var tmp = [coors[index], coors[index + 1]];
var polyline = new BMap.Polyline(tmp, {
strokeColor: "red", //設置顏色
strokeWeight: 2, //寬度
strokeOpacity: 0.8 //透明度
});
map.addOverlay(polyline);
var angle = getAngle(tmp[1], tmp[0]);
marker = drawMarker(tmp[1], angle);
map.addOverlay(marker);
/*var middleDatainfo = data_info.splice(0,1);
console.log(middleDatainfo);*/
var indexNum = index +1 ;
content = data_info[indexNum][2];
drawPolyLine0Var.addOnmouseoverHandler(content, marker, opts);
}
}
if (index === count) {
marker = new BMap.Marker(new BMap.Point(data_info[index][0], data_info[index][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);
map.addOverlay(marker); // 將標注添加到地圖中
content = data_info[count][2];
drawPolyLine0Var.addOnmouseoverHandler(content, marker, opts);
}
//drawPolyLine0Var.addOnmouseoverHandler(content, marker, opts);
function a(event) {
if(!is_stop_draw_track){
drawPolyLine0Var.drawPolyLine0(coors, ++index, data_info);
}else{
drawPolyLine0Var.drawPolyLine0(coors, index, data_info);
}
};
//clearTimeout(a);
setTimeout(a, interval);
}
};
function trackRestart(rew) {
var req = rew;
showMap(req);
Position(req);
}
</script>
