百度地图避坑，vue3，typescript setup

1、刚开始一直安装

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

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

  安装后配置main.ts

?

1 2 3 4 5 6 7

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

　　2、页面示例

       

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<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>