lilanghust/vue-tianditu

天地图vue组件库

vue-tianditu

天地图 vue 组件库

vue-tianditu 文档

安装

NPM

npm i vue-tianditu
# or
yarn add vue-tianditu

CDN

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-tianditu"></script>

快速上手

全局引入

main.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

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

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

按需引入

App.vue

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

<script>
  import { TdtMap, initApiLoader } from "vue-tianditu";
  initApiLoader({
    v: "4.0",
    tk: "your map token"
  });
  export default {
    components: { TdtMap }
  };
</script>

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

CDN 引入

需手动加载 API

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

辅助函数

import { toLngLat, toBounds, toPoint, toIcon } from "vue-tianditu";

说明(v1.2.9 新增)

函数名	返回值	描述
toLngLat(lnglat:[Number,Number])	T.LngLat	转换为经纬度对象。 参数说明: lnglat:经纬度数组
toBounds(bounds:[[Number,Number],[Number,Number]])	T.Bounds	转换为地理范围对象。 参数说明: bounds:地理范围数组
toPoint(point:[Number,Number])	T.Point	转换为像素坐标点对象。 参数说明: point:像素坐标点数组
toIcon(icon:Object|String)	T.Icon	转换为图标对象。 参数说明: icon:String//图片地址 或 {iconUrl:String,//图片地址 iconSize:[Number,Number],//图片大小 iconAnchor:[Number,Number]//偏移}