Vue项目中使用百度地图API

Posted 2021-07-05 小小白学计算机

百度地图官方文档

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. 页面展示效果