VueTianditu

导航

示例

TIP

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

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

import "vue-tianditu/lib/style.css";
驾车
公交
步行
最少时间
最短距离
避开高速
查看代码
<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-demi";

const state = reactive({
  center: [113.280637, 23.125178],
  zoom: 11
});
</script>

<script lang="ts">
export default { name: "demo-route" };
</script>

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