vue-tmapVue3 高性能地圖組件庫(kù)
vue-tmap 是一個(gè)基于騰訊地圖、TypeScript 封裝適用于 Vue3 的高性能地圖組件庫(kù)。
功能特性：
- 文檔完善：基于官方文檔和框架用法的文檔可讀性高，組件示例完善
- 組件化：封裝騰訊地圖命令式的 api 為響應(yīng)式組件，無(wú)需關(guān)心復(fù)雜的地圖 api，只需要操作數(shù)據(jù)即可
- 多框架：包含 react-tmap 和 vue-tmap，且共享同一套類型定義
- Type-safe：補(bǔ)充了騰訊地圖 sdk 的類型聲明，組件也使用 TypeScript 開發(fā)，更好的開發(fā)體驗(yàn)
- 自定義組件：提供開放地圖實(shí)例，可編寫自定義組件或直接調(diào)用地圖原生 api
- 性能優(yōu)化：統(tǒng)一地圖 api 調(diào)用方式和數(shù)據(jù)監(jiān)聽，防止誤用地圖 api 引起性能問題
文檔和示例
歡迎訪問文檔地址，查看更多地圖組件。
主要組件
| tmap-class | vue component | 簡(jiǎn)介 |
|---|---|---|
| Map | tmap-map | 地圖基礎(chǔ)組件 |
| MultiMarker | tmap-multi-marker | 多個(gè)標(biāo)注點(diǎn) |
| MultiPolyline | tmap-multi-polyline | 折線 |
| MultiPolygon | tmap-multi-polygon | 多邊形 |
| MultiLabel | tmap-multi-label | 文本標(biāo)注 |
| MultiCircle | tmap-multi-circle | 圓形 |
| DOMOverlay | tmap-dom-overlay | DOM 覆蓋物抽象類 |
| InfoWindow | tmap-info-window | 信息提示窗 |
| MarkerCluster | tmap-marker-cluster | 點(diǎn)聚合 |
快速開始
安裝
npm install @map-component/vue-tmap
申請(qǐng)騰訊地圖密鑰
https://lbs.qq.com/dev/console/key/manage
簡(jiǎn)單示例
<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 為新申請(qǐng)的密鑰
評(píng)論
圖片
表情