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('获取地理位置失败')
	    }
	  })
	},

五、最终展示效果

相关推荐
灰海28 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
today喝咖啡了吗1 小时前
uniapp,Anroid10+版本如何保存图片并删除
uni-app
为风而战2 小时前
uni-app X APP在线升级 解决【uni-upgrade-center-app】未配置uni-upgrade-center 问题
uni-app
Ama_tor2 小时前
mini-program01の系统认识微信小程序开发
微信小程序·小程序
雪碧聊技术7 小时前
uniapp如何创建并使用组件?组件通过Props如何进行数据传递?
uni-app·创建组件·使用组件·props数据传递
@Dream_Chaser7 小时前
uniapp页面间通信
uni-app
@Dream_Chaser12 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
鱼是一只鱼啊12 小时前
uniapp移动端地图提示鉴权失败请传入正确的key问题处理
uni-app
毛毛三由12 小时前
基于svga+uniapp的微信小程序动画组件开发指南
微信小程序·uni-app·notepad++
雪碧聊技术14 小时前
uniapp简介
uni-app·hbuilder