# vue-tianditu

**Repository Path**: incimo/vue-tianditu

## Basic Information

- **Project Name**: vue-tianditu
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-11
- **Last Updated**: 2022-03-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-tianditu

天地图 vue 组件库
文档 https://soullyoko.github.io/vue-tianditu/

## 安装

### NPM

```
$ npm install vue-tianditu
```

### CDN

```
<script src="https://unpkg.com/vue-tianditu"></script>
```

## 快速上手

### 全局引入

`main.js`

```js
import Vue from "vue";
import VueTianditu from "vue-tianditu";
import App from "./App.vue";

Vue.use(VueTianditu, {
  v: "4.0",
  tk: "your map token"
});

new Vue({
  el: "#app",
  render: h => h(App)
});
```

`App.vue`

```vue
<template>
  <div class="mapDiv">
    <tdt-map></tdt-map>
  </div>
</template>

<style>
.mapDiv {
  width: 100%;
  height: 100%;
}
</style>
```

### CDN 引入

需手动加载 API

```html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-tianditu"></script>
<script>
  VueTianditu.initApiLoader({
    v: "4.0",
    tk: "your map token"
  });
  ...
</script>
```