vue2百度地图选点组件

代码块 loadMap.js

/**
 * 动态加载百度地图api函数
 * @param {String} ak  百度地图AK，必传
 */
export default function loadBMap(ak) {
	return new Promise((resolve, reject) => {
		if (typeof window.BMap !== "undefined") {
			resolve(window.BMap);
			return true;
		}
		window.onBMapCallback = function() {
			resolve(window.BMap);
			return true;
		};
		const script = document.createElement("script");
		script.type = "text/javascript";
		script.src =
			`https://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=onBMapCallback&s=1`;
		script.onerror = reject;
		document.head.appendChild(script);
		return true;
	});
}

组件markerMap.vue

<template>
	<div class="markerMap-wrap">
		<!-- 地图-start -->
		<div id="map" :style="{ width: mapWidth, height: mapHeight }"></div>
		<!-- 地图-end -->
		<!-- 输入框 -->
		<div class="markerMap-input">
			<span class="markerMap-label">地址：</span>
			<input type="text" id="suggestId" class="input-style" :style="{ width: inputWidth + 'px', height: inputHeight + 'px' }" :placeholder="placeholder" />
		</div>
	</div>
</template>

<script>
import loadBMap from '@/utils/loadMap.js';
export default {
	props: {
		mapWidth: {
			type: String,
			default: () => {
				return '100%';
			}
		},
		mapHeight: {
			type: String,
			default: () => {
				return '400px';
			}
		},
		placeholder: {
			type: String,
			default: () => {
				return '请输入搜索地址';
			}
		},
		inputWidth: {
			type: String,
			default: () => {
				return '200';
			}
		},
		inputHeight: {
			type: String,
			default: () => {
				return '30';
			}
		}
	},
	data() {
		return {
			inputValue: ''
		};
	},
	mounted() {
		this.baiDuMapInit();
	},
	methods: {
		/**
		 * 初始化百度地图
		 * **/
		baiDuMapInit() {
			const mapInit = loadBMap('lopPFKvmkRLAiG9Z7TffY8v2hRaVrVA5');
			mapInit.then(BMap => {
				//创建地图实例,位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
				const map = new BMap.Map('map');
				map.centerAndZoom('上海', 12); // 初始化地图,设置城市和地图级别
				map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

				const ac = new BMap.Autocomplete({ input: 'suggestId', location: map }); //建立一个自动完成的对象
				ac.addEventListener('onconfirm', e => {
					//鼠标点击下拉列表后的事件
					const tempValue = e.item.value;
					const searchValue = tempValue.province + tempValue.city + tempValue.district + tempValue.street + tempValue.business;
					this.inputValue = searchValue;
					this.setPlace(BMap, map, searchValue);
				});
			});
		},
		/**
		 * 根据输入框的值在地图上添加标记点
		 * @param
		 *   BMap：地图对象
		 *   searchValue：输入框下拉数据选中的值
		 * **/
		setPlace(BMap, map, searchValue) {
			map.clearOverlays(); //清除地图上所有覆盖物
			const local = new BMap.LocalSearch(map, {
				//智能搜索
				onSearchComplete: res => {
					const pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
					map.centerAndZoom(pp, 21);
					map.addOverlay(new BMap.Marker(pp)); //添加标注
					this.movePoint(BMap, map, res.Ir[0].point);
				}
			});
			local.search(searchValue);
		},
		/**
		 * 移动标记点
		 * @param
		 *   BMap：地图对象
		 *   latlng：经纬度
		 * **/
		movePoint(BMap, map, latlng) {
			map.clearOverlays(); //清除地图上所有覆盖物
			//使用BMap命名空间下的Point类来创建一个坐标点
			const point = new BMap.Point(latlng.lng, latlng.lat);
			const marker = new BMap.Marker(point, {
				enableDragging: true
			});
			map.addOverlay(marker);
			this.latlngToAddress(BMap, latlng);

			// 覆盖物拖拽开始事件
			marker.addEventListener('dragstart', e => {
				// 清除一些覆盖物
				console.log('[开始]', e);
			});
			// 覆盖物拖拽事件
			marker.addEventListener('dragend', () => {
				const nowPoint = marker.getPosition(); // 拖拽完成之后坐标的位置(经纬度)
				this.latlngToAddress(BMap, nowPoint);
			});
		},
		/**
		 * 地址解析
		 * @param
		 *   BMap：地图对象
		 *   latlng：经纬度
		 * **/
		latlngToAddress(BMap, latlng) {
			const geoc = new BMap.Geocoder();
			geoc.getLocation(latlng, rs => {
				console.log(rs);
				if (rs.surroundingPois.length > 0) {
					rs.surroundingPois[0].tempAddress = this.inputValue;
					this.$emit('map', rs.surroundingPois[0]);
				} else {
					rs.tempAddress = this.inputValue;
					this.$emit('map', rs);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.markerMap-wrap {
	width: 100%;
	min-height: 200px;
	.markerMap-input {
		width: 100%;
		margin-top: 10px;
		display: flex;
		align-items: center;
		.markerMap-label {
			font-size: 16px;
			color: #333;
			padding-right: 10px;
		}
		.input-style {
			border: 1px solid #dcdcdc;
			border-radius: 8px;
			padding-left: 12px;
			padding-right: 12px;
		}
	}
}
</style>

使用

<template>
	<div class="match">
		<p>请输入地址：</p>
		<markerMap @map="markerMapHandle"></markerMap>
		<p>地址：{{ addressObject.tempAddress }}</p>
		<p>地址：{{ addressObject.address }} {{ addressObject.title }}</p>
		<p>lng：{{ addressObject.point.lng }}</p>
		<p>lat：{{ addressObject.point.lat }}</p>
	</div>
</template>

<script>
import markerMap from '@/components/markerMap.vue';
export default {
	components: {
		markerMap
	},
	data() {
		return {
			addressObject: {
				title: '--',
				address: '--',
				point: {
					lng: '--',
					lat: '--'
				}
			}
		};
	},
	mounted() {},
	methods: {
		markerMapHandle(params) {
			console.log('[miao]', params);
			this.addressObject = params;
		}
	}
};
</script>

<style lang="scss" scoped>
.match {
	border: 1px solid red;
	width: 100%;
}
p {
	font-size: 16px;
	margin-top: 12px;
}
</style>