百度地图官方文档

1. 申请百度账号和ak

申请

2. 引用百度地图API文件

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">

3. 设置容器样式

设置容器样式大小

4. 创建地图容器元素

地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。

5. 创建地图实例和中心的坐标

6. 地图初始化，同时设置地图展示级别

在创建地图实例后，我们需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作

7. 完整代码

<template><!--  1. 创建地图容器元素--><div class="bmap" id="container"></div>
</template><script>
export default {name: 'BmapDemo',mounted () {// 2. 创建地图示例var map = new window.BMapGL.Map('container')// 3. 设置中心点坐标var point = new window.BMapGL.Point(116.404, 39.915)// 4. 地图初始化，同时设置地图展示级别map.centerAndZoom(point, 15)// 5. 开启鼠标滚轮缩放map.enableScrollWheelZoom(true)var scaleCtrl = new window.BMapGL.ScaleControl() // 添加比例尺控件map.addControl(scaleCtrl)var zoomCtrl = new window.BMapGL.ZoomControl() // 添加缩放控件map.addControl(zoomCtrl)var cityCtrl = new window.BMapGL.CityListControl() // 添加城市列表控件map.addControl(cityCtrl)}
}
</script><style scoped>
.bmap {width: 800px;height: 600px;border: 1px solid #000;
}
</style>

8. 页面展示效果