uniapp打开内置地图，实现线路规划及导航

实现效果:

一：uniapp实现用户当前定位

1.首先打开定位权限：manifest.json文件—>源码视图—>

在 “mp-weixin” : {

"permission" : {"scope.userLocation" : {"desc" : "获取位置信息"}},"requiredPrivateInfos" : [ "getLocation" ],

}

2.实现当前定位

//   初次位置授权getAuthorize() {return new Promise((resolve, reject) => {uni.authorize({scope: "scope.userLocation",success: () => {resolve(); // 允许授权},fail: () => {reject(); // 拒绝授权},});});},// 确认授权后，获取用户位置getLocationInfo() {const that = this;uni.getLocation({type: "gcj02",success: function(res) {// 暂时that.longitude = res.longitude; //118.787575;that.latitude = res.latitude; //32.05024;console.log("获取当前的用户经度", that.longitude);console.log("获取当前的用户纬度", that.latitude);var long = 0;var lat = 0;//小数点保留六位  经度if (that.longitude.toString().indexOf('.') > 0) {const longlatsplit = that.longitude.toString().split('.');if (longlatsplit.length >= 2) {long = parseFloat(longlatsplit[0] === "" ? 0 : longlatsplit[0]) + parseFloat("." + longlatsplit[1].slice(0,6));}}if (that.latitude.toString().indexOf('.') > 0) {const longlatsplit1 = that.latitude.toString().split('.');if (longlatsplit1.length >= 2) {lat = parseFloat(longlatsplit1[0] === "" ? 0 : longlatsplit1[0]) + parseFloat("." + longlatsplit1[1].slice(0,6));}}cookie.set("longitude",long);cookie.set("latitude",lat);console.log("纬度", lat);// this.distance(that.latitude,that.longitude);that.markers = [{id: "",latitude: res.latitude,longitude: res.longitude,iconPath: "../../static/img/phone.png",width: that.markerHeight, //宽height: that.markerHeight, //高}, ];that.getList();},});},// 拒绝授权后，弹框提示是否手动打开位置授权openConfirm() {return new Promise((resolve, reject) => {uni.showModal({title: "请求授权当前位置",content: "我们需要获取地理位置信息，为您推荐附近的美食",success: (res) => {if (res.confirm) {uni.openSetting().then((res) => {if (res[1].authSetting["scope.userLocation"] === true) {resolve(); // 打开地图权限设置} else {reject();}});} else if (res.cancel) {reject();}},});});},// 彻底拒绝位置获取rejectGetLocation() {uni.showToast({title: "你拒绝了授权，无法获得周边信息",icon: "none",duration: 2000,});},getList() {console.log("获取周围美食");},onReady() {//   wx请求获取位置权限this.getAuthorize().then(() => {//   同意后获取this.getLocationInfo();}).catch(() => {//   不同意给出弹框，再次确认this.openConfirm().then(() => {this.getLocationInfo();}).catch(() => {this.rejectGetLocation();});});},

二、实现uniapp打开地图app,并且将要去得店铺标记经纬度传入

注意：
uni.openLocation({
latitude: parseFloat(lat),//------》传入的经纬度必须是浮点数，不能传入字符串，否则地图打不开
longitude:parseFloat(lon),
scale: 18
})

methods{openMap(lon,lat){console.log("获取经纬度ssssfff",lon,lat);//打开地图，并将门店位置传入uni.getLocation({success: res => {// res.latitude=lat;// res.longitude=lon;console.log('location success', parseFloat(lat),parseFloat(lon))uni.openLocation({latitude: parseFloat(lat),longitude:parseFloat(lon),scale: 18})}})},
}

三、实现当前定位到门店位置距离计算:

//进行经纬度转换为距离的计算Rad(d) {return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。},/*计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度默认单位km*/getMapDistance(lat1, lng1, lat2, lng2) {var radLat1 = this.Rad(lat1);var radLat2 = this.Rad(lat2);var a = radLat1 - radLat2;var b = this.Rad(lng1) - this.Rad(lng2);var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));s = s * 6378.137; // EARTH_RADIUS;s = Math.round(s * 10000) / 10000; //输出为公里//s=s.toFixed(2);return s;},

以下是我写的demo,大家可以参考
效果：

<template><view class="content"><view class="text-area"><view class="item"><image class="logo" src="/static/logo.png"></image></view><view class="item item_two"><view class="title" @tap="openMap('104.060268','30.642047')">{{title}}(点击跳转)</view><view class="distance">距离：{{distance}}km</view></view></view></view>
</template><script>export default {data() {return {title: '四川大学华西医院',distance: 0, //"距离"latitude: 39.909, // 默认定在首都longitude: 116.39742,scale: 12, // 默认16markers: [],markerHeight: 30,doorAddress: [], //门店地址}},onLoad() {},mounted() {this.distance = this.getMapDistance('104.04311','30.64242','104.060268','30.642047');console.log('距离',this.distance);},methods: {// 确认授权后，获取用户位置getLocationInfo() {const that = this;uni.getLocation({type: "gcj02",success: function(res) {// 暂时that.longitude = res.longitude; //118.787575;that.latitude = res.latitude; //32.05024;console.log("获取当前的用户经度", that.longitude);console.log("获取当前的用户纬度", that.latitude);var long = 0;var lat = 0;//小数点保留六位  经度if (that.longitude.toString().indexOf('.') > 0) {const longlatsplit = that.longitude.toString().split('.');if (longlatsplit.length >= 2) {long = parseFloat(longlatsplit[0] === "" ? 0 : longlatsplit[0]) + parseFloat("." + longlatsplit[1].slice(0,6));}}if (that.latitude.toString().indexOf('.') > 0) {const longlatsplit1 = that.latitude.toString().split('.');if (longlatsplit1.length >= 2) {lat = parseFloat(longlatsplit1[0] === "" ? 0 : longlatsplit1[0]) + parseFloat("." + longlatsplit1[1].slice(0,6));}}// cookie.set("longitude", long);// cookie.set("latitude", lat);console.log("纬度", lat);// this.distance(that.latitude,that.longitude);that.markers = [{id: "",latitude: res.latitude,longitude: res.longitude,iconPath: "../../static/img/phone.png",width: that.markerHeight, //宽height: that.markerHeight, //高}, ];that.getList();},});},// 拒绝授权后，弹框提示是否手动打开位置授权openConfirm() {return new Promise((resolve, reject) => {uni.showModal({title: "请求授权当前位置",content: "我们需要获取地理位置信息，为您推荐附近的美食",success: (res) => {if (res.confirm) {uni.openSetting().then((res) => {if (res[1].authSetting["scope.userLocation"] === true) {resolve(); // 打开地图权限设置} else {reject();}});} else if (res.cancel) {reject();}},});});},// 彻底拒绝位置获取rejectGetLocation() {uni.showToast({title: "你拒绝了授权，无法获得周边信息",icon: "none",duration: 2000,});},getList() {console.log("获取周围美食");},onReady() {//   wx请求获取位置权限this.getAuthorize().then(() => {//   同意后获取this.getLocationInfo();}).catch(() => {//   不同意给出弹框，再次确认this.openConfirm().then(() => {this.getLocationInfo();}).catch(() => {this.rejectGetLocation();});});},openMap(lon,lat) {console.log("获取经纬度ssssfff", lon, lat);//打开地图，并将门店位置传入uni.getLocation({success: res => {// res.latitude=lat;// res.longitude=lon;console.log('location success', parseFloat(lat), parseFloat(lon))uni.openLocation({latitude: parseFloat(lat),longitude: parseFloat(lon),scale: 18})}})},//进行经纬度转换为距离的计算Rad(d) {return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。},/*计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度默认单位km*/getMapDistance(lat1, lng1, lat2, lng2) {var radLat1 = this.Rad(lat1);var radLat2 = this.Rad(lat2);var a = radLat1 - radLat2;var b = this.Rad(lng1) - this.Rad(lng2);var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));s = s * 6378.137; // EARTH_RADIUS;s = Math.round(s * 10000) / 10000; //输出为公里//s=s.toFixed(2);return s;},//计算距离//   初次位置授权getAuthorize() {return new Promise((resolve, reject) => {uni.authorize({scope: "scope.userLocation",success: () => {resolve(); // 允许授权},fail: () => {reject(); // 拒绝授权},});});},}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {width: 100%;height: 100%;}.text-area {border: 1px solid #CCCCCC;padding: 4px 4px;width: 95%;height: 200rpx;display: flex;justify-content:space-around;}.title {/* border: 1px solid; */font-size: 39rpx;color: #8f8f94;flex: 1;}.distance{font-size: 25rpx;color:red;/* border: 1px solid; */flex: 1;}.item{/* border: 1px solid; */flex: 1;}.item_two{padding-left: 5px;flex: 3;display: flex;flex-direction: column;}
</style>

转发请注明原创噢~~~~
查看资料：https://www.cnblogs.com/zoo-x/articles/12557647.html
走过路过不要错过，大佬请留个赞

uniapp打开内置地图，实现线路规划,导航及距离计算（带demo）相关推荐

微信公众号-获取地理位置-打开内置地图
首先提醒同学,先去研究哈官网,了解点基础参数然后,看这里的代码比较容易这是微信的配置文件,至于里面参数,如何拿到,我上篇文章,微信分享有详细说明,这里不做解释哈wx.config({debug: ...
uniapp使用腾讯地图实现定位，选点，距离计算和导航功能
HelloWorld 以下为官方文档指引: 申请开发者密钥(key):申请密钥开通webserviceAPI服务:控制台 ->应用管理 -> 我的应用 ->添加key-> 勾 ...
微信公众号打开微信内置地图（thinkphp5+jq）
h5或微信公众号打开微信内置地图,选择高德,百度等导航第一步,去后台请求签名数据 this.$http.get(后端地址:获取下面所需要的的数据).then(data => {// 记录tok ...
前端调用微信内置地图
项目中要求使用微信内置地图,在这里记录一下! 前端要做的很简单,一是调用后端接口配置appId和签名等等,二是调用微信内置位置接口,两步搞定. 1.后端接口配置appId和签名等 this.axios ...
H5 移动端钉钉微应用调用微信内置地图
H5 移动端调用微信内置地图通过调用后台接口获取微信签名打开微信的内置地图判断是否是微信的内置浏览器实现逻辑: 我是钉钉微应用,有直接分享好友的链接生成一个链接分享到微信好友,然后在微信调 ...
Android 高德地图自定义线路规划选择方案之后按照方案进行导航
Android 高德地图自定义线路规划选择方案之后按照方案进行导航因为我这边导航需求的问题,导致我这边不能使用高德地图官方的线路规划和导航.所以我这边线路规划和导航界面都是根据高德地图那边给的api ...
公众号微信内置地图在ios上不显示问题
微信公众号内调用微信内置地图,在安卓上可以正常显示,但是在ios上显示一片空白,而且报错:fail invalid_coordinate 解决方法: 微信小程序默认将组件上绑定的参数都当作字符串了,所 ...
Opencv打开内置摄像头
Opencv中VideoCapture是专门用来处理视频文件或者摄像头视频流的类,详细的说明和用法可以参考Opencv2.4.13的说明文档:点击打开链接使用VideoCapture打开内置摄像头的 ...
php微信地图定位导航,网页拉取微信内置地图（openLocation）详细教程轻松实现一键导航 – 蓝洛水深...
众所周知,我们在网页开发中,如果使用的是第三方地图,分享到微信中会非常不友好,用户只能网页导航或者通过第三方地图导航,如果我们使用的百度地图分享,则用户只能发起百度地图的导航,非常的不方便. 所以,为 ...

uniapp打开内置地图，实现线路规划,导航及距离计算（带demo）