vue-tmap是一个基于腾讯地图、TypeScript封装适用于Vue3的高性能地图组件库。功能特性：文档完善：基于官方文档和框架用法的文档可读性高，组件示例完善组件化：封装腾讯地图命令式的api为响应式组件，无需关心复杂的地图api，只需要操作数据即可多框架：包含 react-tmap 和 vue-tmap，且共享同一套类型定义Type-safe：补充了腾讯地图sdk的类型声明，组件也使用TypeScript开发，更好的开发体验自定义组件：提供开放地图实例，可编写自定义组件或直接调用地图原生api性能优化：统一地图api调用方式和数据监听，防止误用地图api引起性能问题文档和示例欢迎访问文档地址，查看更多地图组件。腾讯地图官方文档主要组件tmap-classvuecomponent简介Maptmap-map地图基础组件MultiMarkertmap-multi-marker多个标注点MultiPolylinetmap-multi-polyline折线MultiPolygontmap-multi-polygon多边形MultiLabeltmap-multi-label文本标注MultiCircletmap-multi-circle圆形DOMOverlaytmap-dom-overlayDOM覆盖物抽象类InfoWindowtmap-info-window信息提示窗MarkerClustertmap-marker-cluster点聚合快速开始安装npminstall@map-component/vue-tmap 申请腾讯地图密钥https://lbs.qq.com/dev/console/key/manage简单示例<template><tmap-mapmapKey="CGABZ-3MH66-6VGST-MEMS3-K6U3V-DGBKA":events="events":center="center":zoom="zoom":doubleClickZoom="doubleClickZoom":control="control"></tmap-map></template><scriptlang="ts">import{defineComponent,ref}from'vue';exportdefaultdefineComponent({name:'Home',setup(){constcenter=ref({lat:30.290756,lng:120.074387});constzoom=ref(10);constdoubleClickZoom=ref(true);constprint=(e:unknown)=>{console.log(e);};return{events:{dblclick:print,},center,zoom,doubleClickZoom,control:{scale:{},zoom:{position:'bottomRight',},},};},});</script> mapKey为新申请的密钥
声明：本文仅代表作者观点，不代表本站立场。如果侵犯到您的合法权益，请联系我们删除侵权资源！如果遇到资源链接失效，请您通过评论或工单的方式通知管理员。未经允许，不得转载，本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态
2023年07月07日
评论