基于百度地图的h5的精准定位,并实现计算距离、生成轨迹【vue】【百度地图】【精准定位】【打卡】
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
基于百度地图的h5的精准定位
0、实现的功能
基于百度地图api的h5的精准定位,不依赖平台api
计算两点之间的距离,实现业务需求(例如:打卡)
生成两点之间轨迹
1、官网地址
jspopularGL | 百度地图API SDK (baidu.com)
2、在index.html引入依赖
注:webgl是用来做轨迹的
<script src="https://api.map.baidu.com/api?v=3.0&ak=你的ak"></script>
<script type="text/javascript"
src="//api.map.baidu.com/getscript?v=1.0&type=webgl&ak=你的ak"></script>
3、预览
4、代码
<template>
<div>
<van-button type="primary" @click="baiduMapLocate">定位当前位置</van-button>
<van-button type="primary" @click="getPointsDistance">计算你到默认地点的距离</van-button>
<van-button type="primary" @click="initMap">生成两点之间的轨迹</van-button>
<div>两点之间的轨迹</div>
<div id="container" style="width: 100%;height: 300px;"></div>
<div>百度地图定位当前位置</div>
<div id="allmap" style="width: 100%;height: 300px;background-color: aquamarine;"></div>
</div>
</template>
<script>
import { ref, defineComponent, reactive, toRefs, inject, onMounted } from "vue";
export default defineComponent({
name: 'viewReader',
setup() {
const data = reactive({
// 当前经纬度
curLngLat: {
latitude: '',
longitude: ''
},
// 默认终点的经纬度
defaultTargerLngLat: {
latitude: 24.980251105448456,
longitude: 123.73735883387097
},
});
// navigator定位不准确,废弃
// const getLongitudeLatitude = () => {
// //如果该对象存在,那么地理位置服务可用。
// if ('geolocation' in navigator) {
// /* 地理位置服务可用 */
// var options = {
// enableHighAccuracy: true, //布尔值,表示系统是否使用最高精度来表示结果,注意,这会导致较慢的响应时间或者增加电量消耗(比如对于支持gps的移动设备来说)。如果值为false ,设备会通过更快响应以及/或者使用更少的电量等方法来尽可能的节约资源。默认值fasle
// timeout: 5000, //它表明的是设备必须在多长时间(单位毫秒)内返回一个位置。默认直到获取到位置才会返回值。
// maximumAge: 0 //表明可以返回多长时间(即最长年龄,单位毫秒)内的可获取的缓存位置。如果设置为 0, 说明设备不能使用一个缓存位置,而且必须去获取一个真实的当前位置。默认0
// }
// const success = function (position) {
// data.curLngLat.latitude = position.coords.latitude //当前位置的纬度
// data.curLngLat.longitude = position.coords.longitude //当前位置经度
// console.log('用户当前经纬度', data.curLngLat, position);
// // alert(`当前位置的纬度:${latitude} 当前位置经度:${longitude}`)
// }
// const error = function (err) {
// var errorType = ['您拒绝共享位置信息,请去app设置一下!', '获取不到位置信息', '获取位置信息超时']
// alert(errorType[err.code - 1])
// console.log(errorType[err.code - 1])
// }
// navigator.geolocation.getCurrentPosition(success, error, options)
// } else {
// /* 地理位置服务不可用 */
// console.log('无法获取您的位置,请检查定位是否开启或刷新重试')
// }
// }
/**
* 计算两点之间距离
* @param latlng1 点1 {latitude:'',longitude:''}
* @param latlng2 点2 {latitude:'',longitude:''}
* @returns {number} 返回数字单位为m
*/
const getDistance = (latlng1, latlng2) => {
let { latitude: lat1, longitude: lng1 } = latlng1;
let { latitude: lat2, longitude: lng2 } = latlng2;
let a = Math.PI / 180;
let s = Math.acos(Math.cos(lat1 * a) * Math.cos(lat2 * a) * Math.cos(lng1 * a - lng2 * a) + Math.sin(lat1 * a) * Math.sin(lat2 * a))
s = s * 6378.137 // EARTH_RADIUS;
s = Math.round(s * 10000) / 10000 * 1000;
return s;
}
const getPointsDistance = () => {
const distance = getDistance(data.curLngLat, data.defaultTargerLngLat)
console.log('distance: ' + distance);
alert('distance: ' + distance);
}
const initMap = () => {
var map = new BMapGL.Map("container");
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
var p1 = new BMapGL.Point(data.curLngLat.longitude, data.curLngLat.latitude);
var p2 = new BMapGL.Point(data.defaultTargerLngLat.longitude, data.defaultTargerLngLat.latitude);
var driving = new BMapGL.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });
driving.search(p1, p2);
}
const baiduMapLocate = () => {
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 12);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
console.log(r.point)
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);//标出所在地
map.panTo(r.point);//地图中心移动
//alert('您的位置:'+r.point.lng+','+r.point.lat);
data.curLngLat.latitude = r.point.lat
data.curLngLat.longitude = r.point.lng
var point = new BMap.Point(r.point.lng, r.point.lat);//用所定位的经纬度查找所在地省市街道等信息
var gc = new BMap.Geocoder();
gc.getLocation(point, function (rs) {
var addComp = rs.addressComponents; console.log(rs.address);//地址信息
alert(rs.address);//弹出所在地址
});
} else {
alert('failed' + this.getStatus());
}
}, { enableHighAccuracy: true })
}
return {
getPointsDistance,
initMap,
baiduMapLocate,
...toRefs(data)
};
}
});
</script>
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)