百度地图官方文档
1. 申请百度账号和ak
申请
2. 引用百度地图API文件
<script type="text/javascript" src="https://api./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>
