uniapp地图选点定位h5

1.在高德地图控制台->应用管理->我的应用中新建,Web端(JS API)

 2.在uniapp项目manifest.json中web配置->地图定位中选择高德地图并填写key和安全密钥

3.在项目中调用方法

<u-form-item prop="positionName" label-width="180" @tap="wakeMap">
	<view class="form-item">
		<text class="form-item-title-i size30">*</text>
		<text class="form-item-title size30">01. 现居住地</text>
		<view class="form-item-content">
			<u-input v-model="model.positionName" placeholder="请选择现居住地">
			</u-input>
		</view>
	</view>
</u-form-item>

4.data中定义一个经度和纬度

data(){
    return{
        model: {
			positionName: '',//详细地址
			longitude: 125.3123, //经度
			latitude: 43.882883, //纬度
		},
    }
}

5.在methods中定义方法

wakeMap() {//地图定位
	uni.chooseLocation({
		longitude: this.model.longitude,
		latitude: this.model.latitude,
		success: (res) => {
			this.model.longitude = res.longitude
			console.log('经度:' + this.model.longitude);
			this.model.latitude = res.latitude
			console.log('纬度:' + this.model.latitude);
			this.model.positionName = res.address
			console.log('详细地址:',this.model.positionName);
		}
	})
},

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值