https://github.com/didi/vue-tmap
一个基于腾讯地图JavaScript API GL、TypeScript 封装适用于 Vue3 的高性能地图组件库
https://github.com/didi/vue-tmap
component map map-component qqmap tmap typescript vue
Last synced: 7 months ago
JSON representation
一个基于腾讯地图JavaScript API GL、TypeScript 封装适用于 Vue3 的高性能地图组件库
- Host: GitHub
- URL: https://github.com/didi/vue-tmap
- Owner: didi
- License: apache-2.0
- Created: 2022-04-14T09:24:48.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-16T11:50:24.000Z (over 2 years ago)
- Last Synced: 2025-06-03T01:31:55.161Z (7 months ago)
- Topics: component, map, map-component, qqmap, tmap, typescript, vue
- Language: TypeScript
- Homepage: https://didi.github.io/vue-tmap
- Size: 4.88 MB
- Stars: 95
- Watchers: 6
- Forks: 17
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-tmap
- zh_CN [简体中文](https://github.com/didi/vue-tmap/blob/main/README.zh_CN.md)
### Introduction
vue-tmap, a high-performance map component library for Vue3 based on Tencent Maps and TypeScript encapsulation, has the following features:
- Improve documentation: improve the readability of documentation based on official documentation and framework usage, and improve component examples
- 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: including [react-tmap](https://github.com/didi/react-tmap) and [vue-tmap](https://github.com/didi/vue-tmap), and share the same set of type definitions
- Type-safe: 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
### Documentation and Examples
Welcome to [Official document address](https://didi.github.io/vue-tmap/) to view more map components.
- [Tencent Maps Official Documentation](https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocIndex)
### Main Components
| tmap-class | vue component | Introduction |
| ------------- | ------------------- | -------------------------- |
| Map | tmap-map | Map base components |
| MultiMarker | tmap-multi-marker | Multiple Marker Points |
| MultiPolyline | tmap-multi-polyline | Polyline |
| MultiPolygon | tmap-multi-polygon | Polygon |
| MultiLabel | tmap-multi-label | Text Labeling |
| MultiCircle | tmap-multi-circle | Circle |
| DOMOverlay | tmap-dom-overlay | DOM overlay abstract class |
| InfoWindow | tmap-info-window | Information prompt window |
| MarkerCluster | tmap-marker-cluster | Point Aggregation |
### Quick start
#### Install
```shell
npm install @map-component/vue-tmap
```
#### Apply for Tencent map key
https://lbs.qq.com/dev/console/key/manage
#### Simple example
```vue
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'Home',
setup() {
const center = ref({ lat: 30.290756, lng: 120.074387 });
const zoom = ref(10);
const doubleClickZoom = ref(true);
const print = (e: unknown) => {
console.log(e);
};
return {
events: {
dblclick: print,
},
center,
zoom,
doubleClickZoom,
control: {
scale: {},
zoom: {
position: 'bottomRight',
},
},
};
},
});
```
> mapKey is the newly applied key
### Contribution Guidelines
> 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
```
### communicate with
Add WeChat group after open source