uniapp中进行地图定位-编程知识

uniapp中进行地图定位

一、创建map

二、data中声明变量

三、获取当前位置信息，进行定位

四、在methods中写移动图标获取地名地址的方法

五、最终展示效果

一、创建map

	<!-- 地图展示 --><view class="mymap"><!-- <view class="mymap__map"> --><map class="mymap__map" id="map" :latitude="mapxx.latitude" :longitude="mapxx.longitude":scale="mapxx.scale" :markers="mapxx.markers"@regionchange="mapPoint"></map><!-- </view> --></view>

二、data中声明变量

let infowidth = 32,infoheight = 42;
let infoiconPath = '/static/images/map/loaction-red.png';
data(){return{key:'自己的key',mapxx:{latitude:35.931616,longitude:120.008822,scale:16,markers:{id:0,latitude:35.931616,longitude:120.008822,iconPath:'/static/images/map/loaction-red.png'}},     }}

三、获取当前位置信息，进行定位

onLoad() {//获取当前的地理位置let vthis = this;uni.getLocation({type: 'gcj02',success: function (res) {vthis.mapxx.latitude = res.latitude;vthis.mapxx.longitude = res.longitude;vthis.mapxx.markers = [{id:1,latitude:res.latitude,longitude:res.longitude,iconPath:'/static/images/map/loaction-red.png'}];console.log('当前位置的经度：' + res.longitude);console.log('当前位置的纬度：' + res.latitude);}});
},

四、在methods中写移动图标获取地名地址的方法

	//地图相关操作 -startmapPoint(e){// 地图发生变化的时候，获取中间点，也就是用户选择的位置toFixedif (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {let that = this;this.mapCtx = wx.createMapContext("map");this.mapCtx.getCenterLocation({type: 'gcj02',success: function(res) {that.mapxx.markers = [{latitude: res.latitude,longitude: res.longitude,iconPath: infoiconPath,width: infowidth,height: infoheight,}]that.loadCity(res.longitude,res.latitude);}})}},loadCity(longitude, latitude) {var _self = this;wx.request({url: 'https://restapi.amap.com/v3/geocode/regeo',data: {key: _self.key,location: longitude + "," + latitude,extensions: "all",s: "rsx",sdkversion: "sdkversion",logversion: "logversion"},success: function (res) {_self.dybd.userInfo.dwhzz = res.data.regeocode.formatted_address;},fail: function (res) {console.log('获取地理位置失败')}})},