在vue3.0中使用百度地图制作用户输入地址进行定位，或者用户移动定位的标记点获取标记点的地址以及经纬度

需求

用户能够输入地址获取标记点地址以及经纬度，也能够移动地图上已经生成的标记点，获取地址信息以及经纬度

效果示例图

代码块

在项目中注入百度地图的链接地址以及ak密钥 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;
	});
}

效果代码

<template>
	<div id="map"></div>
	<div id="r-result">
		<span>请输入地址:</span>
		<input type="text" id="suggestId" size="20" value="" />
	</div>

	<p>地址：{{ address }}</p>
	<p>lng:{{ lng }}</p>
	<p>lat:{{ lat }}</p>
</template>

<script setup>
import loadBMap from '@/utils/loadMap.js';
import { ref } from 'vue';
const mapInit = loadBMap('lopPFKvmkRLAiG9Z7TffY8v2hRaVrVA5');

const lng = ref('--');
const lat = ref('--');
const address = ref('--');

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', function(e) {
		//鼠标点击下拉列表后的事件
		const tempValue = e.item.value;
		const searchValue = tempValue.province + tempValue.city + tempValue.district + tempValue.street + tempValue.business;
		setPlace(BMap, map, searchValue);
	});
});
/**
 * 根据输入框的值在地图上添加标记点
 * @param
 *   BMap：地图对象
 *   searchValue：输入框下拉数据选中的值
 * **/
function 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)); //添加标注
			movePoint(BMap, map, res.Ir[0].point);
		}
	});
	local.search(searchValue);
}
/**
 * 移动标记点
 * @param
 *   BMap：地图对象
 *   latlng：经纬度
 * **/
function 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);
	latlngToAddress(BMap, latlng);

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

<style lang="scss" scoped>
#map {
	border: 1px solid red;
	width: 100%;
	height: 600px;
}
#suggestId {
	border: 1px solid red;
	width: 300px;
	height: 30px;
}
</style>

扩展参考百度地图

百度地图 javascript API