官方接口文档地址天地图API我这边用到的技术栈发送网络请求 —— axios前端展示组件 —— ant design ui框架 —— vue3逻辑部分 —— typescriptsetup废话不多说我直接以步骤的形式来说明步骤一使用ant组件添加搜索框提供搜索入口div classsearch-box a-input-search v-model:valuesearchKeyword placeholder请输入地点搜索 enter-button searchonSearchLocation / /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 来实现地图搜索定位如果有问题也可以在评论区给予建议修正感谢
官方接口文档地址天地图API我这边用到的技术栈发送网络请求 —— axios前端展示组件 —— ant design ui框架 —— vue3逻辑部分 —— typescriptsetup废话不多说我直接以步骤的形式来说明步骤一使用ant组件添加搜索框提供搜索入口div classsearch-box a-input-search v-model:valuesearchKeyword placeholder请输入地点搜索 enter-button searchonSearchLocation / /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 来实现地图搜索定位如果有问题也可以在评论区给予建议修正感谢
