百度地图JS在线开发_获取经纬度_存储_读取显示轨迹
文章目录
- 一. H5前端获取经纬度信息并存储到云数据库
-
- 1.1 H5前端网页getLocation() 获取当前经纬度，并每隔10s上传一次，可执行点击开始发送，点击关闭获取
- 1.2 php后端操作数据库实现从前端获取数据存储到指定库
- 二. 从存储的数据中读取数据并显示轨迹（目前是单条轨迹）
-
- 2.1 从数据库中获取json数据格式
- 2.2 将json数据格式读取显示在前端页面
- 2.3 将经纬度（json数据）通过对象存储并在前端显示轨迹
一. H5前端获取经纬度信息并存储到云数据库
1.1 H5前端网页getLocation() 获取当前经纬度，并每隔10s上传一次，可执行点击开始发送，点击关闭获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!--下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示。-->
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>JS获取当前地理位置的方法</title>
</head>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=----------------">
//v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
</script>
//引入jquery的AJA.js
<script type="text/javascript" src="../js/Ajax1.js "></script>
<script type="text/javascript">
// 页面载入时请求获取当前地理位置
window.onload = function () {
// html5获取地理位置,添加点击了，再设置间隔执行
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var timer;//定义一个外部变量，保存定时器的标识
oBtn1.onclick = function () {
alert(111);
clearInterval(timer);//关闭上一个定时器
timer = setInterval(function () {
getLocation();
}, 10000);
};
oBtn2.onclick = function () {
clearInterval(timer);
alert('定时事件停止');
};
};
function getLocation() {
var options = {
enableHighAccuracy: true,
maximumAge: 1000
};
// alert('获取位置信息开始--------->');
if (navigator.geolocation) {
// 走到这里说明，浏览器支持geolocation，参数里有两个回调函数，一个是定位成功后的处理操作，一个是定位失败后的处理操作
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
} else {
// 否则浏览器不支持geolocation
alert('您的浏览器不支持地理位置定位！');
}
}
function onSuccess(position) {
// 返回用户位置
// 经度
var longitude = position.coords.longitude;
// 纬度
var latitude = position.coords.latitude;
// alert('您的当前地址的经纬度：经度' + longitude + '，纬度' + latitude);
position = '您的当前地址的经纬度：经度' + longitude + '，纬度' + latitude;
// document.querySelector("p").innerHTML = position;
// 根据经纬度获取地理位置
var map = new BMap.Map("allmap");
var point = new BMap.Point(longitude, latitude);
var gc = new BMap.Geocoder();
gc.getLocation(point, function (rs) {
var addComp = rs.addressComponents;
// alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
// 这里后面可以写你的后续操作了
// handleData(longitude, latitude);
$ajax({
method: "post",
url: "http://loacalhost/GPS/projectGPS.php",
data: {
longitude: longitude,
latitude: latitude,
},
success: function (result) {
var obj = JSON.parse(result);
alert(obj);
console.log(obj);
},
error: function (msg) {
alert(msg);
}
})
}
// 失败时的回调函数
// 这里是错误提示信息
function onError(error) {
switch (error.code) {
case 1:
alert("位置服务被拒绝！");
break;
case 2:
alert("暂时获取不到位置信息！");
break;
case 3:
alert("获取信息超时！");
break;
case 4:
alert("未知错误！");
break;
}
// 这里后面可以写你的后续操作
}
</script>
<body>
<p> </p>
<button id="btn1" class="btn btn-primary pull-right">点击获取并发送经纬度到数据库</button>
<button id="btn2" class="btn btn-primary pull-right">点击关闭发送经纬度</button>
</body>
</html>
1.2 php后端操作数据库实现从前端获取数据存储到指定库
<?php
header("Content-type:text/html;charset=utf-8");
header('Access-Control-Allow-Origin:*');//解决跨域问题
//统一发返回格式
$responseData = array ("code" =>0,"message" =>"");
var_dump ($_POST);
$longitude= $_POST['longitude'];
$latitude = $_POST['latitude'];
//1、链接数据库
$link = mysql_connect("localhost", "root", "password");
//2、判断是否链接成功
if(!$link){
$responseData['code'] = 1;
$responseData['message']="数据库链接失败";
//返回到前台页面
echo json_encode($responseData); //将关联数组转成json格式字符串返回
exit;
}
//3、设置字符集
mysql_set_charset("utf8");
//4、选择数据库
mysql_select_db("GPS");
//5、准备sql语句进行插入操作
//$sql = "SELECT * from students";
$sql = "INSERT INTO project_gps(longitude,latitude) VALUES('{$longitude}', {$latitude}) ";
echo $sql;
//6、发送sql语句
$res = mysql_query($sql); //插入成功则返回true
var_dump($res);
if(!$res){
$responseData['code'] =2;
$responseData['message'] = "添小组GPS失败！";
//返回到前台页面
echo json_encode($responseData);
exit;
}else{
$responseData['message'] = "添加小组GPS成功！";
//返回到前台页面
echo json_encode($responseData);
}
//7、关闭数据库
mysql_close($link);
?>
二. 从存储的数据中读取数据并显示轨迹（目前是单条轨迹）
2.1 从数据库中获取json数据格式
<?php
header("Content-type:text/html;charset=utf-8");
header('Access-Control-Allow-Origin:*');
//1、链接数据库
$link = mysql_connect("localhost", "root", "password");
if(!$link){
echo "链接失败";
exit; //终止后续所有的代码
}
//3、设置字符集
mysql_set_charset("utf8");
//4、选择数据库
mysql_select_db("GPS");
//5、取出数据库中所有数据
// $sql = "SELECT * from project_gps order by id asc";
$sql = "SELECT * from project_gps ORDER BY id ASC";
//6、发送sql语句，返回是否查询成功
$res = mysql_query($sql);
//7、取出一行数据
$row = mysql_fetch_assoc($res);
$arr = array();
while($row = mysql_fetch_assoc($res)){
array_push($arr,$row);
}
echo json_encode($arr);
// print_r($arr);
// echo json_encode($arr,JSON_UNESCAPED_UNICODE);//json编码
//8、关闭数据库连接
mysql_close($link);
?>
2.2 将json数据格式读取显示在前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>用户列表</title>
<script type="text/javascript" src="../js/Ajax1.js"></script>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn1');
var oT1 = document.getElementById('t1');
oBtn.onclick = function () {
$ajax({
method: "post",
url: "http://localhost/GPS/getprojectGPS.php",
success: function (result) {
var arr = JSON.parse(result);
alert(arr);
// 通过循环创建节点添加到页面上
var str = ``;
for (var i = 0; i < arr.length; i++) {
str += `<tr id='tr'>
<td>${arr[i].id}</td>
<td>${arr[i].project_code}</td>
<td>${arr[i].project_name}</td>
<td>${arr[i].longitude}</td>
<td>${arr[i].latitude}</td>
</tr>`
}
oT1.innerHTML = str;
},
error: function (msg) {
alert(msg);
}
})
}
}
</script>
</head>
<body>
<div class='container'>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h2>获取用户列表</h2>
</div>
<div class='panel-body'>
<button type="button" id='btn1' class='form-control button button-primary'>获取用户数据</button>
<br><br>
<table id='table' class='table table-bordered table-hover'>
<thead></thead>
<tr>
<th>id</th>
<th>项目编号</th>
<th>项目小组名称</th>
<th>经度</th>
<th>纬度</th>
</tr>
</thead>
<tbody id='t1'>
</tbody>
</table>
</div>
<div class='panel-footer'></div>
</div>
</div>
</body>
</html>
2.3 将经纬度（json数据）通过对象存储并在前端显示轨迹
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度地图的动态行驶轨迹</title>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=3.0&ak=jjsVgCxlrvbRjnHwdSUyYlAgIuqrftsk"></script>
<script src="https://cdn.staticfile.org/codemirror/5.40.2/mode/javascript/javascript.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/Ajax1.js"></script>
</head>
<body>
<div id="mapId" style="height: 600px;"></div>
<div>模拟轨迹为: <button onclick="copyText()">复制</button></div>
<input id="req" style="height: 200px; width: 100%;" value="">
<script>
function copyText() {
var input = document.getElementById("req");
input.select(); // 选中文本
document.execCommand("copy"); // 执行浏览器复制命令
alert("复制成功");
}
var map = new BMap.Map("mapId");
map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
// var PointArr = [];
// var myP1 = new BMap.Point(109.513341, 18.27572); //起点(110.338831,25.289691)
var myP1 = new BMap.Point(110.338831, 25.289691);
var myP2 = new BMap.Point(110.054552, 25.223563);
// var myP2 = new BMap.Point(109.526963, 18.269643); //终点(110.054552,25.223563)
var PointArr = [];
var temp = [];
// var PointArr = [
// { lng: 110.338651, lat: 25.289803 },
// { lng: 110.338561, lat: 25.290263 },
// { lng: 110.338551, lat: 25.290363 },
// { lng: 110.33853, lat: 25.290473 },
// { lng: 110.33843, lat: 25.291104 },
// { lng: 110.33825, lat: 25.291305 },
// { lng: 110.33814, lat: 25.291936 },
// { lng: 110.337959, lat: 25.293027 },
// { lng: 110.337789, lat: 25.294189 },
// { lng: 110.337668, lat: 25.29518 },
// { lng: 110.337638, lat: 25.29539 },
// { lng: 110.337488, lat: 25.296641 },
// { lng: 110.337468, lat: 25.296781 },
// { lng: 110.337028, lat: 25.300235 },
// { lng: 110.336988, lat: 25.300525 },
// { lng: 110.336908, lat: 25.301156 },
// { lng: 110.336878, lat: 25.301366 },
// { lng: 110.336818, lat: 25.301847 },
// { lng: 110.336718, lat: 25.302668 },
// { lng: 110.336698, lat: 25.302788 },
// { lng: 110.336638, lat: 25.303248 },
// { lng: 110.336618, lat: 25.303409 },
// { lng: 110.336538, lat: 25.304069 },
// { lng: 110.336488, lat: 25.30439 },
// { lng: 110.336408, lat: 25.305061 }
// ];
// console.log(typeof PointArr[0].lng);
$ajax({
method: "get",
url: "http://localhost/GPS/getprojectGPS.php",
dataType: 'json',
// async function() {
// await axios.post('')
// }, //要同步才能获取打返回的值
success: function (result) {
var arr = JSON.parse(result);
// alert(arr);
// 通过循环创建
for (var i = 0; i < arr.length; i++) {
// str += `
// ${arr[i].id}
// ${arr[i].project_code}
// ${arr[i].project_name}
// ${arr[i].longitude}
// ${arr[i].latitude}
// `
// temp = { lng: parseFloat(arr[i].longitude), lat: parseFloat(arr[i].latitude) }
// PointArr.push(temp);
// PointArr[i].lng = Number(arr[i].longitude);
// PointArr[i].lat = Number(arr[i].latitude);
// let lng = 'lng';
// let lat = 'lat';
var lng = parseFloat(arr[i].longitude);
var lat = parseFloat(arr[i].latitude);
// temp[lng] = lng1;
// temp[lat] = lat1
// PointArr.push(temp);
PointArr.push({ lng, lat })
}
// arr.map((item, index) => {
// PointArr.push(Object.assign({ lng: item.longitude, lat: item.latitude }))
// })
console.log(PointArr);
console.log(PointArr[0].lng);
console.log(typeof PointArr);
},
error: function (msg) {
alert(msg);
}
})
//延迟函数 setTimeout()
setTimeout(() => {
map.centerAndZoom(PointArr, 13);// 根据经纬度显示地图的范围
map.setViewport(PointArr);// 根据提供的地理区域或坐标设置地图视野
console.log(PointArr[0].lng);//读取不到
addStartMarker(new BMap.Point(PointArr[0].lng, PointArr[0].lat), '起点', map);
var carMk;//先将终点坐标展示的mark对象定义
//小车行驶图标
var drivingPoint = new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52, 26), {
anchor: new BMap.Size(27, 13),
imageSize: new BMap.Size(52, 26)
});
//终点图标
var terminalPoint = new BMap.Icon('https://mapopen-website-wiki.cdn.bcebos.com/shouye/redPoint.png', new BMap.Size(45, 45), {
anchor: new BMap.Size(20, 45),
imageSize: new BMap.Size(45, 45)
});
var i = 0;
var interval = setInterval(function () {
if (i >= PointArr.length) {
clearInterval(interval);
return;
}
drowLine(map, PointArr[i], PointArr[i + 1]);//画线调用
i = i + 1;
}, 1000);
// 划线
function drowLine(map, PointArr, PointArrNext) {
if (PointArrNext != undefined) {
var polyline = new BMap.Polyline(
[
new BMap.Point(PointArr.lng, PointArr.lat),
new BMap.Point(PointArrNext.lng, PointArrNext.lat)
],
{
strokeColor: "red",
strokeWeight: 7,
strokeOpacity: 1
}); //创建折线
map.addOverlay(polyline);
addMarkerEnd(new BMap.Point(PointArrNext.lng, PointArrNext.lat), '小车行驶', map, PointArrNext, new BMap.Point(PointArr.lng, PointArr.lat));//添加图标
} else {
addMarkerEnd(new BMap.Point(PointArr.lng, PointArr.lat), '终点', map);//添加终点图标
}
}
//添加起始图标
function addStartMarker(point, name, mapInit) {
if (name == "起点") {
var myIcon = new BMap.Icon("https://mapopen-website-wiki.cdn.bcebos.com/shouye/redPoint.png", new BMap.Size(45, 45), {
anchor: new BMap.Size(20, 45),//这句表示图片相对于所加的点的位置mapStart
imageSize: new BMap.Size(22, 30)//图标所用的图片的大小，此功能的作用等同于CSS中的background-size属性。可用于实现高清屏的高清效果
// offset: new BMap.Size(-10, 45), // 指定定位位置
// imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
});
window.marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注
mapInit.addOverlay(marker); // 将标注添加到地图中
//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
}
}
//添加行驶和终点图标
function addMarkerEnd(point, name, mapInit, trackUnit, prePoint) {
if (name == "小车行驶") {
if (carMk) {//先判断第一次进来的时候这个值有没有定义，有的话就清除掉上一次的。然后在进行画图标。第一次进来时候没有定义也就不走这块，直接进行画图标
mapInit.removeOverlay(carMk);
}
carMk = new BMap.Marker(point, { icon: drivingPoint }); // 创建标注
carMk.setRotation(trackUnit.route);//trackUnit.route
//getAngle(point,prePoint);// js求解两点之间的角度
carMk.setRotation(getAngle(point, prePoint) - 90);// 旋转的角度
mapInit.addOverlay(carMk); // 将标注添加到地图中
//carMk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
} else {
mapInit.removeOverlay(carMk);
carMk = new BMap.Marker(point, { icon: terminalPoint }); // 创建标注
mapInit.addOverlay(carMk);
}
}
//获得角度的函数
function getAngle(n, next) {
var ret
var w1 = n.lat / 180 * Math.PI
var j1 = n.lng / 180 * Math.PI
var w2 = next.lat / 180 * Math.PI
var j2 = next.lng / 180 * Math.PI
ret = 4 * Math.pow(Math.sin((w1 - w2) / 2), 2) - Math.pow(Math.sin((j1 - j2) / 2) * (Math.cos(w1) - Math.cos(w2)), 2);
ret = Math.sqrt(ret);
// var temp = Math.sin(Math.abs(j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
var temp = Math.sin((j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
//console.log(temp)
ret = ret / temp;
ret = Math.atan(ret) / Math.PI * 180;
ret += 90;
// 这里用如此臃肿的if..else是为了判定追踪单个点的具体情况,从而调整ret的值
if (j1 - j2 < 0) {
// console.log('j1
if (w1 - w2 < 0) {
// console.log('w1
ret;
} else {
// console.log('w1>w2')
ret = -ret + 180;
}
} else {
// console.log('j1>j2')
if (w1 - w2 < 0) {
// console.log('w1
ret = 180 + ret;
} else {
// console.log('w1>w2')
ret = -ret;
}
}
return ret;
}
}, 400)
// console.log(PointArr.length);
// console.log(PointArr[0].lng); //读取不到
//怎么将json对象，里面的数据，需要提取，转换为目标数组？
// var lng = arr[i].longitude;
// var lat = arr[1].latitude;
// var PointArr = [
// ];
</script>
</body>
</html>