记 Vue 接入百度地图

搭建环境

Vue 2.9.6
Element-UI 2.13.2

准备工作

打开百度地图开放平台官网，来到页面最下方进行注册，已有百度账号可直接登录。

从导航栏处点击进入到控制台

左侧菜单 —> 应用管理 —> 我的应用 —> 创建应用

应用名称可随意填写，应用类型选择浏览器端。

创建完成之后我的应用中就可以看到，AK (Access Key) 待会儿需要用到。

接入项目

新建一个单独的 js 文件，作用是传入 ak 的值，在页面的 Header 动态拼接一个加载百度地图 js 的 Script 标签。文件名称和位置随意，我这里文件的名称是 gis.js。

export default function loadBMap(ak) {
  return new Promise(function(resolve, reject) {
    if (typeof BMap !== 'undefined') {
      resolve(BMap)
      return true
    }
    window.onBMapCallback = function() {
      resolve(BMap)
    }
    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.src =
    'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&callback=onBMapCallback'
    script.onerror = reject
    document.head.appendChild(script)
  })
}

在需要的页面引入该 js 即可

完整代码

<template>
  <div class="app-container">
    <el-card class="box-card" :body-style="{ padding: '0px' }">
    <div slot="header" class="clearfix">
      <span>地图</span>
    </div>
    <div class="map-area" :id="mapId"></div>
    </el-card>
  </div>
</template>
<script>
  import loadBMap from '@/api/dataFocus/gis.js'
  export default {
    data() {
      return {
        mapId: 'BMap-' + parseInt(Date.now() + Math.random()),
        myMap: null,
        siteName: undefined,
      }
    },
    created() {
      this.siteName = '成都';
    },
    mounted() {
      this.initMap()
    },
    methods: {
      initMap() {
        // 填入应用的 AK
        loadBMap('xxxxxxxxxx')
        .then(() => {
          // 百度地图 API 功能
          this.myMap = new BMap.Map(this.mapId) // 创建 Map 实例
          this.myMap.centerAndZoom(this.siteName, 11) // 初始化地图，设置中心点坐标和地图级别
          // 添加地图类型控件
          this.myMap.addControl(
            new BMap.MapTypeControl({
            mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
            })
          );
          this.myMap.addControl(new BMap.ScaleControl({
            anchor: BMAP_ANCHOR_TOP_LEFT
          }));
          this.myMap.setCurrentCity(this.siteName) // 设置地图显示的城市 此项是必须设置的
          this.myMap.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
        })
        .catch(err => {
          console.log('地图加载失败')
        })
      }
    }
  }
</script>
<style scoped>
  .map-area {
    width: 100%;
    height: 500px;
  }
</style>

效果图

参考资料

记录 Vue 异步加载百度地图