react-tmap


- en English
- zh_CN 简体中文

$3

react-tmap, a high-performance map component library for react based on Tencent Maps and TypeScript encapsulation, has the following features:

- Complete documentation: documentation based on official documentation and framework usage is highly readable, and component examples are complete
- Componentization: Encapsulate the Tencent Maps imperative api as a responsive component, no need to care about the complex map api, only need to operate the data
- Multi-framework: contains react-tmap and vue-tmap, and share the same set of type definitions
- Type-safe(@map-component/tmap-types): supplemented the type declaration of Tencent Maps sdk, components are also developed using TypeScript, a better development experience
- Custom components: provide an open map instance, you can write custom components or directly call the map's native api
- Performance optimization: unify the map api calling method and data monitoring to prevent performance problems caused by misuse of the map api

$3

Visit Official document address to see more map components

> Tencent Maps Official Documentation

$3

| react component | description |
| --------------- | -------------------------- |
| Map | Map Basic Components |
| MultiMarker | Multiple Marker Points |
| MultiPolyline | Polyline |
| MultiPolygon | Polygon |
| MultiLabel | Text Labeling |
| MultiCircle | Circle |
| DOMOverlay | DOM overlay abstract class |
| InfoWindow | Information prompt window |
| MarkerCluster | Point Aggregation |

$3

!Warehouse Architecture Diagram

$3

#### Install

``shell
npm install @map-component/react-tmap
`

#### Apply for Tencent map key

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

#### Simple example

`javascript
import React, { useState } from 'react';
import { TMap, MultiPolygon } from '@map-component/react-tmap';

const styles = {
polygon: {
color: '#3777FF', //surface fill color
showBorder: false, //whether to show the edge of the pulled face
borderColor: '#00FFFF', //border color
},
};

const paths = [
{ lat: 40.041054, lng: 116.272303 },
{ lat: 40.039419, lng: 116.272721 },
{ lat: 40.039764, lng: 116.274824 },
{ lat: 40.041374, lng: 116.274491 },
];

const geometries = [
{
id: 'p1', //The unique identifier of the polygon in the layer (required when deleting and updating data)
styleId: 'polygon', //binding style name
paths: paths, //polygon outline
},
];

const center = { lat: 40.041054, lng: 116.272303 };

export default () => {
const [color, setColor] = useState('#00FF00');
const [zoom, setZoom] = useState(16);

const polygonStyles = React.useMemo(
() => ({
polygon: {
...styles.polygon,
color,
},
}),
[color],
);

return (

setColor('#00FFFF')}>
Modify polygon color

setZoom(zoom + 1)}>Modify map zoom level

mapKey="TOZBZ-OU2CX-JJP4Z-7FCBV-CDDJ2-AHFQZ" // The applied key
zoom={zoom}
center={center} // set the center point coordinates
control={{
zoom: { position: 'BOTTOM_RIGHT' },
scale: false,
rotate: false,
}}
>
styles={polygonStyles}
geometries={geometries}
onClick={() => console.log('Polygon clicked')} // Click on the polygon
/>

);
};
`

> mapKey is the newly applied key

$3

> Thanks to all the technical enthusiasts who participated in the contribution, let's build an easy-to-use map component library together

#### Commit bug

Please submit a bug through issue, and describe in detail how to reproduce the error and the version of dependencies. It is best to display the reproduced code through an online code editor.

#### Submit code

Please submit your code via pull request and we'll take a look soon

#### Start development

`
git clone xxx

cd react-tmap // cd vue-tmap

npm install

npm run dev
``