vue3使用百度地图获取位置信息
本文介绍如何用vue3引入百度地图并使用。引入百度地图有两种方法，一种是全局引入，一种是动态引入。
一、全局引入
在index.html文件中直接插入script引用。好处的是配置简单方便，缺点时不论是否用到了百度地图都会加载对应的js文件。
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=3.0&ak=XXXX">
</script>二、动态引入
通过动态引入，只有在组件用到百度地图的时候才会去加载js文件，如果没用到就不会，方便灵活。动态加载百度地图js的代码如下：
// map.js
// 加载百度地图
export function LoadBaiduMapScript() {
const BMap_URL = "https://api.map.baidu.com/api?v=3.0&ak=XXXX&callback=onBMapCallback";
return new Promise((resolve, _reject) => {
// 如果已加载直接返回
if(typeof BMap !== "undefined") {
resolve(BMap);
return true;
}
// 百度地图异步加载回调处理
window.onBMapCallback = function () {
console.log("百度地图脚本初始化成功...");
resolve(BMap);
};
// 插入script脚本
const scriptNode = document.createElement("script");
scriptNode.setAttribute("type", "text/javascript");
scriptNode.setAttribute("src", BMap_URL);
document.body.appendChild(scriptNode);
});
}三、创建并百度地图
百度地图js文件加载完毕后，就可以直接通new BMap进行百度地图的创建和使用。
<template>
<div id="container" class="positionbox"></div>
</template>
<script lang="ts" setup>
import { ref, unref, onMounted } from 'vue';
import { LoadBaiduMapScript } from './map';
const address: any = ref('河南省郑州市二七区建设东路48号');
const lon: any = ref(113.65);
const lat: any = ref(34.76);
const map: any = ref({});
const point: any = ref({});
const marker: any = ref({});
onMounted(async () => {
await LoadBaiduMapScript();
initMap();
});
const initMap = () => {
// 1.创建地图实例
map.value = new BMap.Map('container');
// 2.设置中心点
point.value = new BMap.Point(lon.value, lat.value);
// 3.设置级别
unref(map).centerAndZoom(point.value, 15);
// 4.开启鼠标滚轮缩放功能。仅对PC上有效
unref(map).enableScrollWheelZoom();
const myIcon = new BMap.Icon(positionIcon, new BMap.Size(23, 25));
marker.value = new BMap.Marker(point.value, myIcon);
unref(map).addOverlay(marker.value); //添加一个标注
// 打开信息窗口
upInfoWindow();
// 点击地图事件
unref(map).addEventListener('click', function (e: any) {
lon.value = e.point.lng;
lat.value = e.point.lat;
point.value = new BMap.Point(lon.value, lat.value);
unref(map).centerAndZoom(point.value, 15);
upInfoWindow();
const gc = new BMap.Geocoder();
gc.getLocation(point.value, (rs: any) => {
if (rs && rs.address) {
address.value = rs.address;
}
});
});
</script>