VueTianditu

搜索

示例

TIP

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

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

import "vue-tianditu/lib/style.css";
查看代码
<template>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom">
      <tdt-control>
        <tdt-search @search-complete="searchComplete" @poi-click="poiClick" @suggest-click="suggestClick"></tdt-search>
      </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
});

function searchComplete(result: T.LocalSearchResult) {
  console.log(result);
}
function poiClick(poi: T.LocalSearchPoi) {
  console.log(poi);
}
function suggestClick(suggest: T.LocalSearchSuggest) {
  console.log(suggest);
}
</script>

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

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

属性

属性类型默认值说明
placeholdernumber"输入关键字搜索"显示在输入框的提示
searchBtnbooleantrue是否显示搜索按钮
routeBtnbooleantrue是否显示导航按钮

事件(v2.7.6)

事件参数描述
poi-click(poi:LocalSearchPoi)点击搜索结果项或地图上的标点触发
suggest-click(suggest:LocalSearchSuggest)点击搜索建议项触发
search-complete(result:LocalSearchResult)搜索完成后触发(包括搜索建议)