H5唤起地图导航路线，唤起高德地图app,百度地图，腾讯

最新推荐文章于 2024-03-27 17:06:43 发布

wwf1225

最新推荐文章于 2024-03-27 17:06:43 发布

阅读量3.4k

点赞数

文章标签： dubbo

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/wwf1225/article/details/133902237

版权

1.高德地图：

<a href="https://uri.amap.com/marker?position=经度,纬度&name=所在的位置名称">高德地图</a>

<a href="http://uri.amap.com/navigation?from=114.02597366,22.54605355&to=114.029243,22.609562&mode=car&src=nyx_super;">高德地图</a>
<a href="http://uri.amap.com/navigation?from=开始位置经度,开始位置纬度&to=结束位置经度,结束位置纬度&mode=car&src=nyx_super;">高德地图</a>

2.百度地图：

<a href="http://api.map.baidu.com/marker?location=纬度,经度&title=所在位置名称&content=所在位置的简介（可选）&output=html">百度地图</a>

<a href="http://api.map.baidu.com/direction?origin=起点纬度,起点经度&destination=终点纬度,终点经度&mode=driving&region=深圳&output=html">百度地图</a>

3.腾讯地图：

let webviewURL = 'http://apis.map.qq.com/uri/v1/markermarker=coord:31.2353,121.48108;addr:上海市人民广场' // 腾讯

uniapp demo

/pages/index/index.vue:

<template>
   <view class="content">
       <image class="logo" src="/static/logo.png"></image>
       <view class="text-area">
           <text class="title">{{title}}</text>
       </view>
       <view @click="openGMap">高德导航</view>
       <br />
       <view @click="openBMap">百度导航</view>
       <br />
       <view @click="openTMap">导航</view>
   </view>
</template>

<script>
   // 参考文档 https://juejin.cn/post/6844904036588584974
   var BMAP_KEY ='Z8cAFdyicwilBWmhuPrEGUzpt6a9w3fl'
   export default {
       data() {
           return {
               title: 'Hello',
               externalUrl: '',
               cityStart: '',
               cityEnd: ''
           }
       },
       onLoad() {
           // this.transformH5Map()
       },
       methods: {
           // 跳转高德地图
           openGMap() {
               // const {
               //    latEnd,
               //    lonEnd,
               //    destination
               // } = this.props;
               // const {
               //    usrLat,
               //    usrLon
               // } = this.getGPSInfo();
               const latEnd = '32',
                   lonEnd = '120',
                   destination = '泰州市广场'

               const usrLat = '31',
                   usrLon = '121'
               // 获取到用户定位信息，走导航模式；未获取到用户定位信息，走单点标注模式
               let url = `https://uri.amap.com/navigation?from=${usrLon},${usrLat},我的位置&to=${lonEnd},${latEnd},${destination}&mode=driving&policy=1&src=mypage&coordinate=gaode&callnative=1`
               // let url = `amapuri://route/plan/?sourceApplication=&slat=31&slon=121&sname=&dlat=&dlon=&dname=&dev=&t=&callnative=1`
               // let url = `amapuri://route/plan/?sid=&slat=39.92848272&slon=116.39560823&sname=A&did=&dlat=39.98848272&dlon=116.47560823&dname=B&dev=0&t=0pkg=com.autonavi.minimap`
               let webviewURL = encodeURIComponent(url)
               uni.navigateTo({
                   url: `/pages/index/webview?url=` + webviewURL
               });
           },
           // 百度地图地址坐标系转换
           transformH5Map () {
               // const {
               //    lonEnd,
               //    latEnd
               // } = this.props
               // const {
               //    usrLat,
               //    usrLon
               // } = this.getGPSInfo()
               const latEnd = '32',
                   lonEnd = '120',
                   destination = '泰州市广场'

               const usrLat = '31',
                   usrLon = '121'

               uni.request({
               url: `https://api.map.baidu.com/geoconv/v1/?coords=${lonEnd},${latEnd}&from=1&to=5&ak=${BMAP_KEY}`,
               data: {
               text: 'uni.request'
               },
               header: {
               'custom-header': 'hello' //自定义请求头信息
               },
               success: (res) => {
               console.log(999,res.data);
               this.lonStart = res.data.result[0].x
               this.latStart = res.data.result[0].y
               this.getCityStart()
               this.getCityEnd()
               },
                   fail:(err) => {
                       this.lonStart = usrLon
                       this.latStart = usrLat
                   }
               });

               // fetchJsonp(`https://api.map.baidu.com/geoconv/v1/?coords=${lonEnd},${latEnd}&from=1&to=5&ak=${BMAP_KEY}`)
               //    .then(res => res.json()).then((data) => {
               //        this.lonStart = data.result[0].x
               //        this.latStart = data.result[0].y
               //        this.getCityStart()
               //        this.getCityEnd()
               //    }).catch(() => {
               //        this.lonStart = usrLon
               //        this.latStart = usrLat
               //    })

           },
           // 百度地图根据经纬度获取始发城市名称
           getCityStart () {
           fetchJsonp(`https://api.map.baidu.com/reverse_geocoding/v3/?ak=${BMAP_KEY}&location=${this.latStart},${this.lonStart}&output=json`).then(res => res.json()).then((data) => {
           this.cityStart = data.result ? data.result.addressComponent.city : '杭州';
           }).catch(() => {
           this.cityStart = '杭州';
           });
           }, // 百度地图根据经纬度获取始发城市名称
           getCityEnd () {
           fetchJsonp(`https://api.map.baidu.com/reverse_geocoding/v3/?ak=${BMAP_KEY}&location=${this.latStart},${this.lonStart}&output=json`).then(res => res.json()).then((data) => {
           this.cityEnd = data.result ? data.result.addressComponent.city : '上海';
           }).catch(() => {
           this.cityEnd = '上海';
           });
           },
           // 跳转百度地图
           openBMap () {
           // const {
           // latStart, lonStart, latEnd, lonEnd, cityStart, cityEnd,
           // } = this;
           // const { destination } = this.props;
           // const sys = getSys();
               const latStart='30', lonStart='120', latEnd = '31', lonEnd = '121', cityStart = '杭州市', cityEnd = '上海市';

           const destination ='上海市人民广场'
           // const sys = getSys();
               // const uri = `direction?origin=latlng:${latStart},${lonStart}|name:我的位置
               const uri = `direction?origin=latlng:${latStart},${lonStart}|name:我的位置`
               // const uriEnd = `destination:latlng:${latEnd},${lonEnd}|name:上海市人民广场`
               let url = `https://api.map.baidu.com/${uri}&mode=driving&src=webapp.baidu.openAPIdemo&output=html&mode=driving&callnative=1`
               // let url = `bdapp://map/${uri}&src=andr.baidu.openAPIdemo&src=webapp.baidu.openAPIdemo&mode=driving&callnative=1`
               let webviewURL = encodeURIComponent(url)
               uni.navigateTo({
                   url: '/pages/index/webview?url=' + webviewURL
               });
           },
               // 腾讯地图
               openTMap () {
                   // let webviewURL = 'http://apis.map.qq.com/uri/v1/marker?marker=coord:31.2353,121.48108;addr:上海市人民广场' // 腾讯

                   // let webviewURL = 'http://api.map.baidu.com/direction?origin=起点纬度,起点经度&destination=终点纬度,终点经度&mode=driving&region=深圳&output=html' // 百度
                   let webviewURL = 'http://api.map.baidu.com/direction?origin=31.2353,121.48108&destination=31.7,121.2&mode=driving&region=上海&output=html' // 百度

                   // let webviewURL = 'http://uri.amap.com/marker?position=121.48108,31.2353&name=目的地&coordinate=gaode&callnative=1' // 高德
                   // let webviewURL = 'http://uri.amap.com/navigation?from=开始位置经度,开始位置纬度&to=结束位置经度,结束位置纬度&mode=car&src=nyx_super' // 高德
                   // https://uri.amap.com/navigation?from=${usrLon},${usrLat},我的位置&to=${lonEnd},${latEnd},${destination}&mode=driving&policy=1&src=mypage&coordinate=gaode&callnative=1 // 高德
                   // let webviewURL = 'https://uri.amap.com/navigation?from=31.2353,121.48108,我的位置&to=32,120,泰州&mode=driving&policy=1&src=mypage&coordinate=gaode&callnative=1' // 高德
                   uni.navigateTo({
                       url: '/pages/index/webview?url=' + encodeURIComponent(webviewURL)
                   });
               }

}
}
</script>

<style>
   .content {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }

   .logo {
       height: 200rpx;
       width: 200rpx;
       margin-top: 200rpx;
       margin-left: auto;
       margin-right: auto;
       margin-bottom: 50rpx;
   }

   .text-area {
       display: flex;
       justify-content: center;
   }

   .title {
       font-size: 36rpx;
       color: #8f8f94;
   }
</style>

/pages/index/webview.vue :

<template>
<view class="container">
<web-view :src="externalUrl"></web-view>
</view>
</template>

<script>
export default {
data() {
return {
externalUrl: ''
};
},
onLoad(option) {
console.log('option',option,decodeURIComponent(option.url));
this.externalUrl = decodeURIComponent(option.url);
}
};
</script>

<style scoped>
.container {
width: 100%;
height: 100vh;
}
</style>

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
H5唤起地图导航路线，唤起高德地图app,百度地图，腾讯

from=${usrLon},${usrLat},我的位置&to=${lonEnd},${latEnd},${destination}&mode=driving&policy=1&src=mypage&coordinate=gaode&callnative=1 // 高德。const latStart='30', lonStart='120', latEnd = '31', lonEnd = '121', cityStart = '杭州市', cityEnd = '上海市';
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。