首先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 }