react-tmap是一个基于腾讯地图、TypeScript封装适用于react的高性能地图组件库。
功能特性：文档完善：基于官方文档和框架用法的文档可读性高，组件示例完善组件化：封装腾讯地图命令式的api为响应式组件，无需关心复杂的地图api，只需要操作数据即可多框架：包含 react-tmap 和 vue-tmap，且共享同一套类型定义Type-safe(@map-component/tmap-types):补充了腾讯地图sdk的类型声明，组件也使用TypeScript开发，更好的开发体验自定义组件：提供开放地图实例，可编写自定义组件或直接调用地图原生api性能优化：统一地图api调用方式和数据监听，防止误用地图api引起性能问题文档和示例访问 官方文档，查看更多地图组件腾讯地图官方文档
主要组件react组件描述Map地图基础组件MultiMarker多个标注点MultiPolyline折线MultiPolygon多边形MultiLabel文本标注MultiCircle圆形DOMOverlayDOM覆盖物抽象类InfoWindow信息提示窗MarkerCluster点聚合快速开始安装npminstall@map-component/react-tmap 申请腾讯地图密钥https://lbs.qq.com/dev/console/key/manage简单示例importReact,{useState}from'react';import{TMap,MultiPolygon}from'@map-component/react-tmap';conststyles={polygon:{color:'#3777FF',//面填充色showBorder:false,//是否显示拔起面的边线borderColor:'#00FFFF',//边线颜色},};constpaths=[{lat:40.041054,lng:116.272303},{lat:40.039419,lng:116.272721},{lat:40.039764,lng:116.274824},{lat:40.041374,lng:116.274491},];constgeometries=[{id:'p1',//该多边形在图层中的唯一标识（删除、更新数据时需要）styleId:'polygon',//绑定样式名paths:paths,//多边形轮廓},];constcenter={lat:40.041054,lng:116.272303};exportdefault()=>{const[color,setColor]=useState('#00FF00');const[zoom,setZoom]=useState(16);constpolygonStyles=React.useMemo(()=>({polygon:{...styles.polygon,color,},}),[color],);return(<div><div><buttononClick={()=>setColor('#00FFFF')}>修改多边形颜色</button><buttononClick={()=>setZoom(zoom+1)}>修改地图缩放级别</button></div><TMapmapKey="TOZBZ-OU2CX-JJP4Z-7FCBV-CDDJ2-AHFQZ"//申请的keyzoom={zoom}center={center}//设置中心点坐标control={{zoom:{position:'BOTTOM_RIGHT'},scale:false,rotate:false,}}><MultiPolygonstyles={polygonStyles}geometries={geometries}onClick={()=>console.log('点击了多边形')}//点击多边形/></TMap></div>);};mapKey为新申请的密钥
评论