VUE3使用百度地图
时间: 2024-01-14 21:19:45 浏览: 29
在Vue3中使用百度地图,可以按照以下步骤进行操作:
1. 在`index.html`文件中引入百度地图API的JS文件,例如:
```html
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
```
2. 在Vue3组件中,可以通过`mounted`钩子函数来初始化地图,例如:
```javascript
mounted() {
// 创建地图实例
const map = new BMap.Map("map-container");
// 初始化地图,设置中心点坐标和地图级别
const point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 添加控件和覆盖物等
// ...
}
```
其中,`map-container`是一个`<div>`元素的ID,用于容纳地图。
3. 如果需要异步加载百度地图API的JS文件,可以使用`loadScript`方法,例如:
```javascript
mounted() {
const AK = "您的密钥";
const BMapURL = `http://api.map.baidu.com/api?v=2.0&ak=${AK}&callback=initMap`;
// 异步加载百度地图API的JS文件
const loadScript = (url, callback) => {
const script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
script.onload = () => {
callback();
};
document.body.appendChild(script);
};
// 初始化地图
const initMap = () => {
const map = new BMap.Map("map-container");
const point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 添加控件和覆盖物等
// ...
};
loadScript(BMapURL, initMap);
}
```
这样可以避免在页面加载时阻塞其他资源的加载。