（前端地图）通过天地图API搜索地点并跳转定位

官方接口文档地址：天地图API

我这边用到的技术栈：

发送网络请求 —— axios

前端展示组件 —— ant design ui

框架 —— vue3

逻辑部分 —— typescript+setup

废话不多说，我直接以步骤的形式来说明

步骤一：使用ant组件添加搜索框（提供搜索入口）

<div class="search-box"> <a-input-search v-model:value="searchKeyword" placeholder="请输入地点搜索" enter-button @search="onSearchLocation" /> </div>

搜索框的位置和样式根据需求自行调整

步骤二：去天地图控制台申请key

天地图·应用认证

调用天地图下的API，这个key是必要的

浏览器端 Key：前端 Vue/HTML 用，必须配置域名白名单（本地调试加localhost）；不在白名单域名直接拒绝访问

服务端 Key：后端 Java/Python、桌面 GIS 软件用，绑定服务器IP 白名单

步骤三： 配置vite代理，浏览器有同源策略会拦截本地前端直接调用天地图接口，配置vite代理就可以规避这个问题，但是需要注意，这个vite代理仅在本地生效，部署后需要在nginx中反向代理配置。或者有替代方案：就是通过后端接口的方式，来转发天地图请求

在vite.config.js——server——proxy中添加代理：

'/tianditu': { target: 'http://api.tianditu.gov.cn', changeOrigin: true, rewrite: (path) => path.replace(/^\/tianditu/, ''), },

这样配置之后就不会存在跨域问题了

步骤四：逻辑部分（发送接口请求）

//绑定搜索框的值 const searchKeyword = ref(""); //进行搜索 调用天地图搜索API async function onSearchLocation(){ //去除首尾空格 const keyword = searchKeyword.value.trim(); if(!keyword){return} try{ //请求参数 const postStr = JSON.stringify({ keyWord:keyword,//搜索关键词 level:7,//级别 mapBound: "73.4,3.8,135.1,53.6", // 全国范围（包含南海诸岛完整可视） queryType:1, //普通搜索 count:10,//返回结果数量 start:0,//起始位置 }); //这边的config.vecBasemapKey 是我的key，需要替换格式为 tk = xxxxxx const response = await axios.get(`/tianditu/v2/search?${config.vecBasemapKey}`,{ params:{ postStr, type:'query' }, }); //请求成功后进行地图跳转定位 if(response.status === 200){ handleSearchResult(response.data); }else{ return false; } }catch(err){ console.error(err); return false; } }

步骤五：请求成功后获取经纬度，并进行地图定位跳转

function handleSearchResult(data){ const area = data?.area; const poi = data?.pois?.length > 0 ? data.pois[0] : null; if(!area?.lonlat && !poi?.lonlat){return} //这边必须要转为number类型，不然跳转会失败 const [lon, lat] = (area?.lonlat.split(',') || poi?.lonlat.split(',')).map(Number); const view = mapViewStore.mapView; if(!view){return} //我这边是arcgis跳转的函数 view.goTo({ center:[lon, lat], zoom: 12 }) }

我这边用的跳转函数goto()是 arcgis的，如果你们用到的的openlayers，用下面的跳转函数：

//openlayers跳转定位 view.animate({ center: [lon, lat], zoom: 12, duration: 1000 // 动画时长ms，可选 });

好了，这样就实现功能闭环了，通过天地API 来实现地图搜索定位，如果有问题也可以在评论区给予建议修正，感谢！