vue-tmapVue3 高性能地图组件库-技术圈

vue-tmapVue3 高性能地图组件库

联合创作 · 2023-09-28 00:20

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

功能特性：

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

文档和示例

欢迎访问文档地址，查看更多地图组件。

腾讯地图官方文档

主要组件

tmap-class	vue component	简介
Map	tmap-map	地图基础组件
MultiMarker	tmap-multi-marker	多个标注点
MultiPolyline	tmap-multi-polyline	折线
MultiPolygon	tmap-multi-polygon	多边形
MultiLabel	tmap-multi-label	文本标注
MultiCircle	tmap-multi-circle	圆形
DOMOverlay	tmap-dom-overlay	DOM 覆盖物抽象类
InfoWindow	tmap-info-window	信息提示窗
MarkerCluster	tmap-marker-cluster	点聚合

快速开始

安装

npm install @map-component/vue-tmap

申请腾讯地图密钥

https://lbs.qq.com/dev/console/key/manage

简单示例

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

mapKey 为新申请的密钥

编辑