转自：https://blog.csdn.net/qq_54753561/article/details/129500254
打开腾讯地图的官网注册账号登陆进入，滑入我的头像开发者信息：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 onl oad() {},
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 onl oad(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 }
标签：city,uniapp,longitude,定位导航,key,腾讯,latitude,uni,width From： https://www.cnblogs.com/gzy2016Blog/p/17859010.html