uview中使用uniapp自带的地图实现地图点选位置功能

使用uniapp提供的地图功能,不需要导入任何插件.

https://uniapp.dcloud.io/component/map

这里也有uniapp地图的,官方说明.

<template>	<view class="wrap">		<u-form ref="validateFormRef" :model="validateForm.value">			<u-form-item label="物件名称:" prop="blockName" :required="blnBlockName">				<u-input placeholder="物件名称" v-model="validateForm.value.blockName" type="text" v-if="blnBlockName"></u-input>				<label v-else style="text-align: right;">{{validateForm.value.blockName}}</label>			</u-form-item>						<!-- :required="blnBlockAddress" -->			<u-form-item label="物件定位:" prop="blockSamplename">				<u-input placeholder="未定位" v-model="validateForm.value.blockSamplename" type="text" v-if="blnBockSamplename" @click="choseLocation"></u-input>				<label v-else style="text-align: right;">{{validateForm.value.blockSamplename}}</label>			</u-form-item>		</u-form>	<!-- 	  <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">		                </map> -->								<u-button			@click="addBlockAddress"			shape="circle"			type="warning"			:ripple="true"			style="background: #f8a418;margin-top: 44rpx;"		>提交位置信息		</u-button>	</view></template>

可以看到这里这个未定位,那个input框,提供了一个@click事件,然后在这个事件中,

choseLocation(){				let _self = this;				uni.chooseLocation({				    success: function (res) {				        console.log('位置名称：' + res.name);				        console.log('详细地址：' + res.address);				        console.log('纬度：' + res.latitude);				        console.log('经度：' + res.longitude);						_self.validateForm.value.blockSamplename=res.name;						_self.validateForm.value.blockAddress=res.address;						_self.validateForm.value.blockPosx=res.longitude;						_self.validateForm.value.blockPosy=res.latitude;				    }				});			}

我们就可以直接获取到点选的位置的经纬度,或者位置地址逆解析出来的,位置的详细名称了.

下面是效果.

?

?