vue3中怎么使用地图组件啊？

Question

vue3中怎么使用地图组件啊？
我已经申请了百度地图的api和ak,查了各种教程，总是报错；百度的官方文档只有react的，没有vue3。有哪位网友能给一个成熟的方案啊？

Answer 1

你可以使用 vue-baidu-map 组件。首先安装它：

npm install vue-baidu-map -S

然后在你的Vue组件中导入组件并使用：

<template>
  <div>
    <baidu-map :ak="ak" :center="center" :zoom="zoom" style="height: 500px"></baidu-map>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map'

export default {
  components: {
    BaiduMap
  },
  data () {
    return {
      ak: 'your-ak',
      center: {
        lng: 104.06,
        lat: 30.67
      },
      zoom: 11
    }
  }
}
</script>

这里的ak是你申请的百度地图的api的ak。你也可以更改中心点和地图的缩放级别。