使用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;
}
});
}我们就可以直接获取到点选的位置的经纬度,或者位置地址逆解析出来的,位置的详细名称了.
下面是效果.
?
?
