1. 程式人生 > 實用技巧 >小程式定位問題

小程式定位問題

首先app.json開啟

1  "permission": {
2     "scope.userLocation": {
3       "desc": "你的位置資訊將用於小程式位置介面的效果展示"
4     }
5   },

地圖引用參照:https://lbs.amap.com/api/wx/gettingstarted

獲取到具體位置,

 1    getCity() {
 2       let _this = this;
 3       var myAmapFun = new amapFile.AMapWX({
 4         key: "c484beae1f3191dd6af41da09aba4fe5
", 5 }); 6 myAmapFun.getRegeo({ 7 success: function (data) { 8 _this.CHANGE_CITY_NAME(data[0].desc); 9 }, 10 fail: function (info) {}, 11 }); 12 },

在地圖上做標註

 1 <div class="map">
 2       <div class="mapTitle">當前地址:{{ address }}</div>
 3
<map 4 id="map" 5 :longitude="longitude" 6 :latitude="latitude" 7 scale="16" 8 :markers="markers" 9 style="width: 100%; height: 600rpx;" 10 ></map> 11 </div>
 1 getLocation() {
 2       var that = this;
 3       var myAmapFun = new
amapFile.AMapWX({ 4 key: "c484beae1f3191dd6af41da09aba4fe5", 5 }); 6 myAmapFun.getPoiAround({ 7 iconPathSelected: "/static/images/marker.png", 8 success: function (data) { 9 const dataMarkers = data.markers; 10 if (dataMarkers && dataMarkers.length > 0) { 11 that.markers = dataMarkers; 12 that.longitude = dataMarkers[0].longitude; 13 that.latitude = dataMarkers[0].latitude; 14 that.address = dataMarkers[0].address; 15 } 16 console.log(data); 17 }, 18 }); 19 },

根據輸入獲取提示詞

1 <input
2       type="text"
3       placeholder="請輸入搜尋內容"
4       focus="true"
5       @input="changeVal"
6       v-model="cityName"
7     />
 1   changeVal(e) {
 2       const { value } = e.target;
 3       var that = this;
 4       var myAmapFun = new amapFile.AMapWX({
 5         key: "c484beae1f3191dd6af41da09aba4fe5",
 6       });
 7       myAmapFun.getInputtips({
 8         keywords: value,
 9         location: "",
10         success: function (data) {
11           if (data && data.tips) {
12             that.tips = data.tips;
13           }
14         },
15       });
16     }