hn_ldlz/ldlz-H5/pages/map/map.vue

<template>
	<page-meta :page-font-size="$store.state.vuex_fontsize+'px'" :root-font-size="$store.state.vuex_fontsize+'px'"></page-meta>
	<div>
		<div>
			<baidu-map class="map" :center="circleCenter" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler" />
		</div>

		<view class="sxBtn">
			<u-icon name="reload" color="#ff5500" size="22" @click="Refresh"></u-icon>
		</view>


		<span class="footer">
			<button style="width: 60%;"  type="primary" @click="subMit">确 定</button>
		</span>
	</div>
</template>

<script>
	import {
		BaiduMap,
	} from "vue-baidu-map";
	export default {
		components: {
			BaiduMap,
		},
		props: ['point'],
		data() {
			return {
				id: "", // 页面id 
				circleCenter: { // 点位信息
					lng: "",
					lat: ""
				},
				map: {},
				scope: 50, // 范围
				zoom: 20, // 地图 视线大小
				geocoder: "",
				marker:"",
				localMap:{
					lng:"",
					lat:"",
					address:"",
				}
			}
		},
		mounted() {
			//通过浏览器的Geolocation API获取经纬度
			// if (navigator.geolocation) {
			// 	navigator.geolocation.getCurrentPosition(this.showPosition);
			// } else {
			// 	console.log("Geolocation is not supported by this browser.");
			// }
		},
		onLoad(option) {},
		methods: {
			showPosition(position) {
				console.log(position);
				const latitude = position.coords.latitude;
				const longitude = position.coords.longitude;
				this.circleCenter = {
					lng: longitude,
					lat: latitude,
				};
			},
			Refresh() {

				let that = this
				uni.showLoading({
					title:"获取中..."
				})
				this.geocoder = new BMap.Geolocation(); //通过百度地图 创建地址解析器的实例   获取经纬度
				this.geocoder.enableSDKLocation = true // 启用SDK定位
				this.geocoder.getCurrentPosition(function(res) {
					var point = res.point
					const currentLocation = [res.longitude, res.latitude];
					console.log("当前位置经纬度", currentLocation, res.address.province, res.address.city);
					var gc = new BMap.Geocoder();
					gc.getLocation(point, function(rs) {
						
						uni.hideLoading();
						that.circleCenter = {
							lng: rs.point.lng,
							lat: rs.point.lat,
						};
						
						that.localMap.lat=rs.point.lat;
						that.localMap.lng=rs.point.lng;
						that.localMap.address=rs.address;
						
						that.map.centerAndZoom(new BMap.Point(that.circleCenter.lng, that.circleCenter.lat));
						
						if(that.marker){
							that.map.removeOverlay(that.marker);
						}
						
						that.marker = new BMap.Marker(point);
						that.map.addOverlay(that.marker);
						
					})
				});

			},
			handler({
				BMap,
				map
			}) {
				let that = this;
				this.map=map;
				uni.showLoading({
					title:"获取中..."
				})
				
				this.geocoder = new BMap.Geolocation(); //通过百度地图 创建地址解析器的实例   获取经纬度
				this.geocoder.enableSDKLocation = true // 启用SDK定位
				this.geocoder.getCurrentPosition(function(res) {
					uni.hideLoading();
					var point = res.point
					const currentLocation = [res.longitude, res.latitude];
					var gc = new BMap.Geocoder();
					gc.getLocation(point, function(rs) {
						that.circleCenter = {
							lng: rs.point.lng,
							lat: rs.point.lat,
						};
						that.localMap.lat=rs.point.lat;
						that.localMap.lng=rs.point.lng;
						that.localMap.address=rs.address;
						console.log(that.localMap);
						
						that.map.centerAndZoom(new BMap.Point(that.circleCenter.lng, that.circleCenter.lat));
						if(that.marker){
							that.map.removeOverlay(that.marker);
						}
						that.marker = new BMap.Marker(point);
						that.map.addOverlay(that.marker);
					})
				});
			},
			subMit() {
				if(this.localMap.lng=="" || this.localMap.lat=="" ){
					uni.showToast({
						title:"未获取到所在位置，请确认定位权限是否开启",
						icon:"none"
					})
					return false
				}
				console.log(this.localMap);
				this.$store.commit('SET_LOCALMAP', this.localMap)
				uni.navigateBack({delta:1})
			}

		}
	}
</script>

<style scoped  lang="less">
	.map {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.flexs {
		display: flex;
		align-items: center;
		width: 100%;
		border-bottom: 1px solid #f5f5f5;
	}

	.flcol {
		display: flex;
		flex-direction: column;
	}

	.dialog-footer {
		display: flex;

	}
	
	.sxBtn{
		position: fixed;
		top: 10%;
		right: 3%;
		z-index: 999;
		width: 40px;
		height: 40px;
		background-color: rgba(255, 255, 255, 0.7);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		box-shadow: 0 0 3px 1px #999;
		&:active{
			background-color: rgba(255, 255, 255, 1);
		}
	}
	.footer{
		position: fixed;
		bottom: 5%;
		width: 100%;
		text-align: center;
		
	}
</style>