今天给大家分享一款超不错的 vue3.js 高性能腾讯地图组件Vue3Tmap。

vue3-tmap 一个基于腾讯地图 JavaScript API GL、TypeScript 封装适用于 Vue3 的高性能地图组件库。

快速安装

npm install @map-component/vue-tmap

引入使用

<template>
  <tmap-map
    mapKey="CGABZ-3MH66-6VGST-MEMS3-K6U3V-DGBKA"
    :events="events"
    :center="center"
    :zoom="zoom"
    :doubleClickZoom="doubleClickZoom"
    :control="control"
  >
  </tmap-map>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'Home',
  setup() {
    const center = ref({ lat: 30.290756, lng: 120.074387 });
    const zoom = ref(10);
    const doubleClickZoom = ref(true);
    const print = (e: unknown) => {
      console.log(e);
    };
    return {
      events: {
        dblclick: print,
      },
      center,
      zoom,
      doubleClickZoom,
      control: {
        scale: {},
        zoom: {
          position: 'bottomRight',
        },
      },
    };
  },
});
</script>

功能特性

• 文档完善：基于官方文档和框架用法的文档可读性高，组件示例完善
• 组件化：封装腾讯地图 api 为响应式组件，无需关心复杂的地图 api，只需要操作数据即可
• 多框架：包含 react-tmap 和 vue-tmap，且共享同一套类型定义
• Type-safe：补充了腾讯地图 sdk 的类型声明，组件也使用 TypeScript 开发，更好的开发体验
• 自定义组件：提供开放地图实例，可编写自定义组件或直接调用地图原生 api
• 性能优化：统一地图 api 调用方式和数据监听，防止误用地图 api 引起性能问题

非常实用的一款vue3地图组件，感兴趣的可以去看一看。

最后附上文档及项目地址

# 文档地址
https://didi.github.io/vue-tmap/
# 仓库地址
https://github.com/didi/vue-tmap

Okra，今天就先分享到这里了。