react-tmap, a high-performance map component library for react based on Tencent Maps and TypeScript encapsulation, has the following features:
Visit Official document address to see more map components
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 |
npm install @map-component/react-tmap
https://lbs.qq.com/dev/console/key/manage
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 (
<div>
<div>
<button onClick={() => setColor('#00FFFF')}>
Modify polygon color
</button>
<button onClick={() => setZoom(zoom + 1)}>Modify map zoom level</button>
</div>
<TMap
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,
}}
>
<MultiPolygon
styles={polygonStyles}
geometries={geometries}
onClick={() => console.log('Polygon clicked')} // Click on the polygon
/>
</TMap>
</div>
);
};
mapKey is the newly applied key
Thanks to all the technical enthusiasts who participated in the contribution, let's build an easy-to-use map component library together
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.
Please submit your code via pull request and we'll take a look soon
git clone xxx
cd react-tmap // cd vue-tmap
npm install
npm run dev
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。