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

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

  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>

 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 }