导航

示例

TIP

TdtRoute是单独的 UI 组件，需要使用TdtControl定位到地图上，或根据需要使用css定位。

无论全局引入还是按需引入导航组件，都需要导入样式文件

import "vue-tianditu2/dist/es/style.css";

驾车

公交

步行

«‹1 / 0›»

最少时间

最短距离

避开高速

查看代码

<template>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom">
      <tdt-control>
        <tdt-route></tdt-route>
      </tdt-control>
    </tdt-map>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";

defineOptions({
  name: "demo-route"
});
const state = reactive({
  center: [113.280637, 23.125178],
  zoom: 11
});
</script>

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