【Vue】丝滑地在 vue 中使用百度地图 vue-baidu-map

官方文档 https://dafrok.github.io/vue-baidu-map/#/zh/start/installation

1. 安装

使用 npm 安装 vue-baidu-map：

$ npm install vue-baidu-map --save

2. 全局注册

在 Vue 中全局注册百度地图组件库：

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: 'YOUR_APP_KEY' // 在百度地图开发者平台申请的密钥
})

3. 使用百度地图组件

在模板中使用 baidu-map 组件：

<template>
  <baidu-map class="bm-view">
  </baidu-map>
</template>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

4. 初始化加载地图

在地图加载完毕后更新样式：

<template>
  <baidu-map class="bm-view" @ready="handler">
  </baidu-map>
</template>

<script>
export default {
  methods: {
    handler({ BMap, map }) {
      // 可以在这里进行其他操作，例如更改主题
      map.setMapStyle({ style: "midnight" });
      console.log("地图已加载", BMap, map);
    }
  }
}
</script>

5. 添加控件

在右上角加入比例尺控件：

<template>
  <baidu-map class="map" center="北京">
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
  </baidu-map>
</template>

在右上角加入缩放控件：

<template>
  <baidu-map class="map" center="北京">
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
  </baidu-map>
</template>