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

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

你可以使用 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。你也可以更改中心点和地图的缩放级别。

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 你可以参考下这篇文章：Vue3迁移指南之--依赖报错
• 除此之外, 这篇博客: vue 百度地图根据详细地址获取经纬度中的 2.百度地图ak（密钥），如何申请百度一下，不做讲解 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  

  用到的百度地图API，链接地址：

  http://lbs.baidu.com/index.php?title=webapi/guide/webservice-geocoding
  

  项目和一块使用

  this.$jsonp('http://api.map.baidu.com/geocoding/v3/', {
    address: '北京市海淀区上地十街10号',
    output: 'json',
    ak: 您的密钥
  }).then(json => {
     // 得到我们想要的内容
     console.log(json)
  }).catch(err => {
     console.log(err)
  })
  

  到此，我们就可以得到想要的经纬了

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^