Vue3使用百度地图(前后端详解)

一.百度开放平台

百度开放平台-控制台

前往百度开放平台申请密钥（ak）。

可以创建二个ak：浏览器端用于前端页面使用；服务端用于调用百度API接口使用；(个人用法)

二.引入百度地图

全局引用：在项目public包下的index.html中引入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的ak"></script>

 三.编写组件

<template>
  <div id="map" :style="{ width: width + 'px', height: height + 'px' }">
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, ref, nextTick, } from 'vue'
export default defineComponent({
  name:'组件名称（WbMap）',
  props: {
    // 给定默认纬度
    latitude: {
      type: Number,
      default: () => {
        return 22.588837980913652
      },
    },
    //给定默认经度
    longitude: {
      type: Number,
      default: () => {
        return 113.86550296615803
      },
    },
    //地图宽高
    width: {
      type: Number,
      default: 598
    },
    height: {
      type: Number,
      default: 346
    }
  },
   //回调
  emits: [&