uniapp使用内置地图选择插件，实现地址选择并在地图上标点

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>