devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp接入腾讯地图实现定位导航功能。_uni-app 地图导航

作者：很楠不爱3 | 2024-05-07 09:54:44

赞

踩

uni-app 地图导航

打开腾讯地图的官网注册账号登陆进入，滑入我的头像开发者信息：https://lbs.qq.com/service/webService/webServiceGuide/webServiceOverview

2 找到添加的应用，添加key

3 webService API 查询

4 然后在manifest.json 中设置如下，以及小程序id

uniapp用到的api

uni.getLocation 获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用。
uni.openLocation 使用微信内置地图查看位置
this.mapDom = uni.createMapContext('mapDom') 获取map id=mapDom 的实例
this.mapDom.includePoints includePoints 缩放视野展示所有经纬度

bug uni.getLocation 不触发直接将基础库调整为 2.17.0

首页代码

  1. <template>
  2.     <view class="">
  3.         <div class="header">
  4.             <view class="content">
  5.                 你要去哪里：
  6.                  <view class="text-area">
  7.                     <text @click="toMap()" class="title">{{title}}</text>
  8.                    </view>
  9.             </view>
  10.             
  11.              <input @input="changeCity" v-model="city" type="text" height="50" />
  12.             <ul v-show="isShowSearch">
  13.                 <li @click="getCityHandle(item.address)" v-for="item in suggestionData" :key="item.id">{{item.address}}</li>
  14.             </ul>
  15.         </div>
  16.         
  17.     </view>
  18.  
  19. </template>
  20.  
  21. <script>
  22.     import {
  23.         Debounce
  24.     } from '../../utils/debounce.js'
  25.  
  26.     export default {
  27.         data() {
  28.             return {
  29.                 title: '出发',
  30.                 key: '2J4BZ-3CFEV-OYSPG-UDFGU-ONNNS-63FOT',
  31.                 city: '河南省鹤壁市浚县',
  32.                 locationConfig: null,
  33.                 noClick: true,
  34.                 suggestionData: null,
  35.                 isShowSearch:false
  36.             }
  37.         },
  38.         onLoad() {},
  39.         methods: {
  40.             toMap() {
  41.  
  42.                 this.getPosition((location) => {
  43.                     uni.navigateTo({
  44.                         url: `/pages/map/index?lat=${ location.lat}&lng=${ location.lng}&city=${this.city}`
  45.                     })
  46.                 })
  47.             },
  48.             getPosition(callback) {
  49.                 uni.request({
  50.                     url: `https://apis.map.qq.com/ws/geocoder/v1/?address=${this.city}&key=${this.key}`,
  51.                     success: ({
  52.                         data
  53.                     }) => {
  54.                         callback(data.result.location)
  55.                     },
  56.                 })
  57.             },
  58.             getCityHandle(val) {
  59.                 this.city = val
  60.                 this.isShowSearch = false
  61.             },
  62.             changeCity: Debounce(function(e) {
  63.                 this.isShowSearch = true
  64.                 console.log(432);
  65.                 this.city = e.target.value
  66.                 uni.request({
  67.                     url: `https://apis.map.qq.com/ws/place/v1/suggestion?key=${this.key}&keyword=${this.city}`,
  68.                     success: ({
  69.                         data
  70.                     }) => {
  71.                         console.log(423, data.data);
  72.                         this.suggestionData = data.data
  73.                     },
  74.                 })
  75.  
  76.             }, 1000)
  77.         }
  78.     }
  79. </script>
  80.  
  81. <style>
  82.     ul {
  83.         height: auto;
  84.             width: 90%;
  85.         overflow: scroll;
  86.     }
  87.  
  88.     ul li {
  89.         margin: 2px;
  90.         width: 100%;
  91.         height: auto;
  92.         border-radius: 10upx;
  93.         background-color: #ccc;
  94.         padding: 10upx;
  95.         box-sizing: border-box;
  96.     }
  97.  
  98.     .content {
  99.         display: flex;
  100.         margin-bottom: 20upx;
  101.     }
  102.  
  103.     .logo {
  104.         height: 200rpx;
  105.         width: 200rpx;
  106.         margin-top: 200rpx;
  107.         margin-left: auto;
  108.         margin-right: auto;
  109.         margin-bottom: 50rpx;
  110.     }
  111.  
  112.     .text-area {
  113.         display: flex;
  114.         justify-content: center;
  115.         border: 1px solid #ccc;
  116.         width: 30%;
  117.             border-radius: 10upx;
  118.     }
  119.  
  120.     .title {
  121.         font-size: 36rpx;
  122.         color: #8f8f94;
  123.     }
  124.  
  125.     .header {
  126.         width: 100%;
  127.         height: 30upx;
  128.         padding: 30upx;
  129.  
  130.     }
  131.  
  132.     .header input {
  133.             width: 90%;
  134.         border: 1px solid #ccc;
  135.         border-radius: 10upx;
  136.     }
  137. </style>

地图页面

  1. <template>
  2.     <view class="">
  3.         <view class="page-body">
  4.             <view class="page-section page-section-gap">
  5.                 <map style="width: 100%; height: 75vh;" 
  6.                  id="mapDom"
  7.                  show-location 
  8.                  :latitude="latitude" 
  9.                  :longitude="longitude" 
  10.                  :markers="covers"
  11.                  show-location
  12.                  @updated="lodingMap"
  13.                  >
  14.                 </map>
  15.                 <div @click="backPositionHandle" class="positionIcon"></div>
  16.             </view>
  17.         </view>
  18.         <view class="footer">
  19.             <h3>你的目的地</h3>
  20.             <view class="descriptive">{{city}}</view>
  21.             <button class="position" @click="getHereHandle">到这里</button>
  22.         </view>
  23.     </view>
  24.  
  25. </template>
  26.  
  27. <script>
  28.     export default {
  29.         data() {
  30.             return {
  31.                 latitude: 0,
  32.                 longitude: 0,
  33.                 covers: [{
  34.                     id: 1,
  35.                     width: 50,
  36.                     height: 50,
  37.                     latitude: 0,
  38.                     longitude: 0,
  39.                     iconPath: '../../static/1.gif'
  40.                 }, ],
  41.                 city:'',
  42.                 flag:false
  43.             }
  44.         },
  45.         onReady() {
  46.             this.mapDom = uni.createMapContext('mapDom')
  47.             console.log(423,this.mapDom);
  48.         },
  49.         onLoad(option) {
  50.             this.covers[0].latitude = Number(option.lat)
  51.             this.covers[0].longitude = Number(option.lng)
  52.             this.city = option.city
  53.             //  uni.getLocation 不触发直接将基础库调整为 2.17.0
  54.             uni.getLocation({
  55.                 type: 'gcj02',
  56.                 success: (res) => {
  57.                     console.log('当前位置的经度：' + res.longitude);
  58.                     console.log('当前位置的纬度：' + res.latitude);
  59.                     this.latitude = Number(res.latitude)
  60.                     this.longitude = Number(res.longitude)
  61.                     // 获取位置成功之后进行缩放，直观的看到坐标
  62.                     // includePoints 缩放视野展示所有经纬度
  63.                     this.mapDom.includePoints({
  64.                         padding:[140,50,140,50],
  65.                         points:[
  66.                             //第一个是我的位置
  67.                             {
  68.                                 latitude:this.latitude,
  69.                                 longitude:this.longitude
  70.                             },
  71.                             // 第二个是店铺的位置
  72.                             {
  73.                                 latitude:this.covers[0].latitude,
  74.                                 longitude:this.covers[0].longitude
  75.                             }
  76.                         ]
  77.                     })
  78.                 }
  79.             });
  80.         },
  81.         methods:{
  82.             // 地图初始化完成后触发
  83.             lodingMap() {
  84.                 console.log(423);
  85.                 this.flag = true
  86.             },
  87.             getHereHandle() {
  88.                 if(!this.flag) return
  89.                 // let plugin = requirePlugin('routePlan');
  90.                 // let key = '2J4BZ-3CFEV-OYSPG-UDFGU-ONNNS-63FOT';  //使用在腾讯位置服务申请的key
  91.                 // let referer = 'navigateMap';   //调用插件的app的名称
  92.                 // let endPoint = JSON.stringify({  //终点
  93.                 //   'name': '北京西站',
  94.                 //   'latitude': 39.894806,
  95.                 //   'longitude': 116.321592
  96.                 // });
  97.                 // wx.navigateTo({
  98.                 //   url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
  99.                 // });
  100.                 uni.openLocation({
  101.                       latitude:this.covers[0].latitude,    //维度
  102.                       longitude: this.covers[0].longitude, //经度
  103.                       name: this.city,    //目的地定位名称
  104.                       scale: 15,    //缩放比例
  105.                       // address: "河南省鹤壁市浚县"    //导航详细地址
  106.                     })
  107.         
  108.             },
  109.             backPositionHandle() {
  110.                 if(!this.flag) return
  111.                 this.mapDom.moveToLocation();
  112.             }
  113.         }
  114.     }
  115. </script>
  116.  
  117. <style>
  118.     .page-section-gap {
  119.         position: relative;
  120.     }
  121.     .footer{
  122.         width: 100%;
  123.         height: 25vh;
  124.         background-color: #fff;
  125.         box-sizing: border-box;
  126.         padding: 20upx  40upx 0 40upx;
  127.         display: flex;
  128.         flex-direction: column;
  129.         border-radius: 22upx;
  130.     }
  131.     .position{
  132.         height: 90upx;
  133.         line-height:90upx;
  134.         background-color: #3d89f0;
  135.         color: #fff;
  136.         width: 100%;
  137.     }
  138.     .descriptive{
  139.         font-size: 30upx;
  140.         margin: 30upx 0 30upx 0;
  141.     }
  142.     .positionIcon {
  143.         width: 40upx;
  144.         height: 40upx;
  145.         border-radius: 50%;
  146.         position: absolute;
  147.         bottom: 40upx;
  148.         right: 40upx;
  149.         background-image: url('https://tse2-mm.cn.bing.net/th/id/OIP-C.fCPxTGJccQvVdqrNFqrMRwHaHa?pid=ImgDet&rs=1');
  150.         background-size: 100% 100%;
  151.     }
  152. </style>

/utils/debounce.js 防抖方法

  1. export  const Debounce = (fn, wait) => {
  2.     let delay = wait|| 500
  3.     let timer
  4.     return function () {
  5.         let args = arguments;
  6.         if (timer) {
  7.             clearTimeout(timer)
  8.         }
  9.        
  10.         let callNow = !timer
  11.         timer = setTimeout(() => {
  12.             timer = null
  13.         }, delay)
  14.         if (callNow) fn.apply(this, args)
  15.     }
  16. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/548582
推荐阅读