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中写移动图标获取地名地址的方法

	//地图相关操作 -start
	mapPoint(e){
	  // 地图发生变化的时候，获取中间点，也就是用户选择的位置toFixed
	  if (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('获取地理位置失败')
	    }
	  })
	},

五、最终展示效果