百度地图中静态轨迹的实现
2018-05-17 本文已影响10人
gogocheng
后端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>
