天地图 Vue 基础使用指南本文档说明在本项目Vue 2.6中如何接入和使用天地图 JS API 4.0的基础能力加载 SDK、显示地图。一、前置准备1.1 申请密钥tk打开 天地图控制台创建应用获取浏览器端 Keytk在应用管理 → 域名白名单中添加访问域名localhost 127.0.0.1 你的生产域名未配置白名单会导致瓦片或接口返回 403地图显示空白。1.2 配置环境变量在项目根目录.env.development和.env.production中添加# 天地图密钥VUE_APP_TIANDITU_TK你的天地图密钥注意变量名必须以VUE_APP_开头Vue CLI 才会注入到前端代码修改.env后需要重启npm run dev不要将.env文件提交到 Git二、Vue 页面快速接入2.1 模板地图容器地图容器必须设置宽高否则地图不会显示。templatedivclassmap-pagedividmy-map/divclassmap-infospan选点坐标/spanspanclassmap-coord{{ coordText }}/span/div/div/templatescriptimport{ensureTiandituLoaded,createSatelliteMap,panMapTo,formatLngLat,bindMapClick,bindMapMouseMove,resolveAddressFromLngLat}from/utils/tiandituMapexportdefault{data(){return{map:null,marker:null,coordText:,form:{lng:,lat:,address:}}},mounted(){this.initMap()},methods:{asyncinitMap(){try{// 1. 加载天地图 SDKawaitensureTiandituLoaded()// 2. 默认中心点constlng122.086287constlat37.493758// 3. 创建卫星影像地图含默认 Markerconst{map,marker}createSatelliteMap(my-map,lng,lat,16)this.mapmapthis.markermarkerthis.coordTextformatLngLat(lng,lat)// 4. 鼠标移动显示经纬度可选bindMapMouseMove(map,(moveLng,moveLat){// 可用于实时展示鼠标位置})// 5. 点击地图选点bindMapClick(map,(clickLng,clickLat){this.onMapPick(clickLng,clickLat)})}catch(err){console.error(err)this.$message.warning(err.message||天地图加载失败请检查 VUE_APP_TIANDITU_TK 配置)}},onMapPick(lng,lat){// 移动 Marker 和地图中心panMapTo(this.map,this.marker,lng,lat)// 更新表单坐标this.form.lngString(lng)this.form.latString(lat)this.coordTextformatLngLat(lng,lat)// 逆地理编码坐标 → 地址resolveAddressFromLngLat(lng,lat).then((address){this.form.addressaddress}).catch((error){console.error(逆地理编码失败,error)})}}}/scriptstylescoped.map-page{position:relative;width:100%;height:100vh;}#my-map{width:100%;height:100%;}.map-info{position:absolute;bottom:10px;left:10px;background-color:rgba(255,255,255,0.8);padding:5px;border-radius:5px;}/style2.2、常见问题地图空白原因容器没有高度或 SDK / 密钥未加载成功。排查检查 CSS 是否设置了height检查.env中VUE_APP_TIANDITU_TK是否配置修改.env后是否重启 dev serverF12 查看 Network 是否有 403报「未配置天地图密钥」确认环境变量名正确且值为有效 tkVUE_APP_TIANDITU_TKxxxxxxxxxxxxxxxx瓦片 403到 天地图控制台 检查Key 是否有效当前访问域名是否加入白名单三、最小可用示例复制即用template div div iddemo-map stylewidth:100%;height:400px; / p坐标{{ lng }}, {{ lat }}/p /div /template script import { ensureTiandituLoaded, createSatelliteMap, bindMapClick, panMapTo } from /utils/tiandituMap export default { data() { return { map: null, marker: null, lng: 122.15, lat: 37.42 } }, mounted() { this.init() }, methods: { async init() { await ensureTiandituLoaded() const ret createSatelliteMap(demo-map, this.lng, this.lat, 14) this.map ret.map this.marker ret.marker bindMapClick(this.map, (lng, lat) { this.lng lng this.lat lat panMapTo(this.map, this.marker, lng, lat) }) } } } /script参考链接天地图 JS API 4.0 开发指南天地图控制台密钥管理