百度地图避坑，vue3，typescript setup

1、刚开始一直安装

vue-baidu-map，他适用于vue2，一直处于不识别_BMap

2改用：vue-baidu-map-3x

  安装后配置main.ts

import BaiduMap from "vue-baidu-map-3x";


app.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: "",
});

　　2、页面示例

       

<template>
  <div>
    <baidu-map
      class="bm-view"
      :zoom="mapZoom"
      :center="mapCenter"
      @ready="handler"
    ></baidu-map>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

const mapCenter = ref({ lng: 0, lat: 0 });
const mapZoom = ref(3);

const handler = ({ BMap, map }) => {
  console.log(BMap, map);
  mapCenter.value.lng = 116.404;
  mapCenter.value.lat = 39.915;
  mapZoom.value = 15;
};
</script>

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