vue2中怎么添加百度地图
时间: 2024-03-16 11:15:46 浏览: 126
vue项目中使用百度地图的方法
在 Vue2 中添加百度地图,一般可以通过以下步骤实现:
1. 在 index.html 中引入百度地图的 JavaScript API:
```html
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
```
其中,ak 为你在百度地图开放平台申请的密钥。
2. 在组件中创建地图容器,并初始化地图:
```html
<template>
<div id="map" style="width: 100%; height: 500px;"></div>
</template>
<script>
export default {
mounted() {
const map = new BMap.Map('map')
const point = new BMap.Point(116.404, 39.915)
map.centerAndZoom(point, 15)
}
}
</script>
```
在 mounted 钩子函数中创建地图容器,并初始化地图,这里的 BMap 是全局变量,它是通过引入百度地图 API 后自动创建的。
3. 样式调整
需要注意的是,地图容器需要设置宽度和高度,否则地图无法正常显示。
以上就是 Vue2 中添加百度地图的基本步骤,如果需要使用百度地图的其他功能,可以参考百度地图 API 文档进行开发。
阅读全文