vue3+ts使用百度地图

在Vue3中结合TypeScript使用百度地图（Baidu Map），首先你需要安装`@types/bmap-gl`库来提供 TypeScript 的类型支持，可以通过npm或yarn安装：

npm install @types/bmap-gl --save-dev
# 或者
yarn add @types/bmap-gl -D

接下来，在项目中引入并配置百度地图组件。在`.vue`文件中，你可以使用`<b-map>`标签，并通过props传递地理坐标、地图初始化设置等信息，同时利用TypeScript的声明文件获取更安全的类型检查：

<template>
  <div>
    <b-map :center="center" :zoom="zoom">
      <!-- 其他地图元素如标记、信息窗等 -->
    </b-map>
  </div>
</template>

<script lang="ts">
import { Component, Prop } from 'vue';
import BMap from 'bmap-gl';

@Component({
  components: {
    BMap,
  },
})
export default class MapComponent extends Vue {
  @Prop() center: [number, number]; // 地理坐标
  @Prop() zoom: number; // 显示缩放级别

  mounted() {
    this.initMap();
  }

  private initMap() {
    const map = new BMap.Map('container', {
      center: [this.center[0], this.center[1]], // 使用TypeScript props
      zoom: this.zoom,
    });
    // ...其他地图初始化操作
  }
}
</script>