vue-tmap是一个基于腾讯地图、TypeScript封装适用于Vue3的高性能地图组件库。
功能特性：文档完善：基于官方文档和框架用法的文档可读性高，组件示例完善组件化：封装腾讯地图命令式的api为响应式组件，无需关心复杂的地图api，只需要操作数据即可多框架：包含 react-tmap 和 vue-tmap，且共享同一套类型定义Type-safe：补充了腾讯地图sdk的类型声明，组件也使用TypeScript开发，更好的开发体验自定义组件：提供开放地图实例，可编写自定义组件或直接调用地图原生api性能优化：统一地图api调用方式和数据监听，防止误用地图api引起性能问题文档和示例欢迎访问文档地址，查看更多地图组件。腾讯地图官方文档主要组件tmap-classvuecompoet简介Maptmap-map地图基础组件MultiMarkertmap-multi-marker多个标注点MultiPolylietmap-multi-polylie折线MultiPolygotmap-multi-polygo多边形MultiLabeltmap-multi-label文本标注MultiCircletmap-multi-circle圆形DOMOverlaytmap-dom-overlayDOM覆盖物抽象类IfoWidowtmap-ifo-widow信息提示窗MarkerClustertmap-marker-cluster点聚合快速开始安装pmistall@map-compoet/vue-tmap 申请腾讯地图密钥https://lbs.qq.com/dev/cosole/key/maage简单示例<template><tmap-mapmapKey="CGABZ-3MH66-6VGST-MEMS3-K6U3V-DGBKA":evets="evets":ceter="ceter":zoom="zoom":doubleClickZoom="doubleClickZoom":cotrol="cotrol"></tmap-map></template><scriptlag="ts">import{defieCompoet,ref}from'vue';exportdefaultdefieCompoet({ame:'Home',setup(){costceter=ref({lat:30.290756,lg:120.074387});costzoom=ref(10);costdoubleClickZoom=ref(true);costprit=(e:ukow)=>{cosole.log(e);};retur{evets:{dblclick:prit,},ceter,zoom,doubleClickZoom,cotrol:{scale:{},zoom:{positio:'bottomRight',},},};},});</script>mapKey为新申请的密钥
评论