uniapp使用内置地图选择插件,实现地址选择并在地图上标点
代码如下:
<style>
page{ background:#F4F5F6; }
::-webkit-scrollbar {width: 0;height: 0;color: transparent;}
page{ height:100%; width:100%; font-size:24rpx;}
image,view,input,textarea,label,text,navigator{ box-sizing: border-box; color:#222; font-size:28rpx;}
image{width:100%; height:100%;}
.line1{ white-space: nowrap;overflow: hidden; text-overflow: ellipsis;}
.line2{ word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.flex{ display: flex; align-items: center;}
.center{ display: flex; align-items: center; justify-content: center;}
.between{ display: flex; align-items:center; justify-content: space-between;}
.btn{ background:#f60; box-shadow: none; width:100%; text-align: center; line-height:92rpx; height:92rpx;
border-radius:16rpx; color:#fff; border:0; font-size:32rpx;}
.btn:active{ opacity:0.8;}
.btn::after{display:none;}
</style>
<style lang="scss" scoped>
.addaddress{ height:100%; overflow: hidden;
.maps{ height:400rpx;}
.box{padding:0 30rpx; position:relative; margin-top:-50rpx}
.form{ background:#fff; border-radius:24rpx;
&.f2{ margin-top:20rpx; }
&.bd0{ border-bottom:0;}
.item{ min-height:108rpx; padding:0 24rpx;
.fl{ width:140rpx;}
.fr{ flex:1; border-bottom:1px solid #F4F5F6; padding:40rpx 0;
.yhname{}
.area{padding-top:20rpx; color:#a5a5a5;}
.loca{width:32rpx; height:32rpx; margin-right:8rpx;}
.intxt{ flex:1; border:0; background:none;}
.radios{
.s1{margin-left:15rpx;}
.radio{ transform: scale(0.65);}
}
}
}
.btn{ border-radius:48rpx; margin-top:90rpx;}
}
}
</style>
<template>
<view class="addaddress">
<view class="maps">
<map :longitude="longitude" :latitude="latitude" :scale="14" style="width:100%;height:100%;" :markers="markers"></map>
</view>
<view class="box">
<view class="form">
<view class="item flex" style="align-items: flex-start;">
<view class="fl" style="padding:40rpx 0;">地址</view>
<view class="fr" @tap="chooseLocation">
<view class="yhname flex">
<input type="text" class="intxt" v-model="form.name" disabled placeholder="请选择地址" placeholder-style="color:#CBCBCB">
<arrow-right :size="13" color="#CBCBCB"></arrow-right>
</view>
<view class="area" v-if="form.area">{{form.area}}</view>
</view>
</view>
<view class="item flex">
<view class="fl">门牌号</view>
<view class="fr flex bd0">
<input type="text" class="intxt" placeholder="街道、楼牌号等详细地址" placeholder-style="color:#CBCBCB">
</view>
</view>
</view>
<view class="form f2">
<view class="item flex">
<view class="fl">联系人</view>
<view class="fr between">
<input type="text" class="intxt" placeholder="请输入联系人" placeholder-style="color:#CBCBCB">
<view class="radios flex">
<view class="s1 flex"><radio color="#4CD964" class="radio"></radio>先生</view>
<view class="s1 flex"><radio color="#4CD964" class="radio"></radio>女士</view>
</view>
</view>
</view>
<view class="item flex">
<view class="fl">手机号</view>
<view class="fr flex">
<input type="text" class="intxt" placeholder="联系人手机号码" placeholder-style="color:#CBCBCB">
</view>
</view>
<view class="item"><button class="btn">保存</button></view>
</view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
longitude: 119.39742,
latitude: 39.909,
markers:[{longitude: 119.39742, latitude: 39.909,iconPath: '/static/address.png'}],
form:{
name:'',
area:'',
address:'',
location:'',
}
}
},
onLoad() {
this.$nextTick(res=>{
this.init()
})
},
methods:{
//定位
init(){
uni.getLocation({
type: 'wgs84',
success:(res) => {
if(res.errMsg=="getLocation:ok"){
this.setMap(res)
}
}
});
},
//自带选址
chooseLocation() {
uni.chooseLocation({
success: (res) => {
console.log(res)
this.form.name = res.name
this.form.area = res.address
this.form.location = this.util.formatLocation(res.longitude, res.latitude)
this.setMap(res)
}
})
},
//设置地图坐标
setMap(res){
this.longitude = res.longitude
this.latitude = res.latitude
this.markers[0].longitude = res.longitude
this.markers[0].latitude = res.latitude
}
}
}
</script>
<style>
</style>