天地图应用篇：增加全屏、图层选择功能
本节说明：
目的：
- 实现地图的图层切换
- 全屏显示 / 退出全屏
案例截图
- 示下：
案例代码
-
示例代码：
<template><div class="tianditu-map-container"><!-- 顶部搜索和天气栏 --><div class="map-top-bar"><div class="search-weather-box search-box-official"><el-autocompletev-if="mapOptions.showSearch"v-model="searchKeyword":fetch-suggestions="fetchSearchSuggestions"placeholder="搜索地名、公交站、地铁站"class="search-input"@select="handleSelectSuggestion"clearable><template #default="{ item, query, highlighted }"><div class="search-suggestion-item" :class="{ 'is-active': highlighted }"><span class="search-suggestion-icon">{{ getPoiIcon(item.catalog) }}</span><span class="search-suggestion-title" v-html="highlightKeyword(item.value, query)"></span><span class="search-suggestion-type">{{ item.catalog }}</span><span class="search-suggestion-meta">{{ item.address }}</span></div></template><template #append><el-button :icon="Search" @click="searchLocation" :loading="searchLoading"><!-- 搜索 --></el-button></template></el-autocomplete></div></div><!-- 右上角按钮组 --><div class="map-toolbar-top-right"><el-tooltip content="全屏" placement="left"><el-button v-if="mapOptions.showFullscreen" :icon="isFullscreen ? Fold : FullScreen" @click="toggleFullscreen" circle /></el-tooltip></div><!-- 地图容器 --><div id="tianditu-map" class="map-container"></div><!-- 标记管理和表单 --><div class="marker-form" v-if="showMarkerForm"><el-form :model="markerForm" label-width="100px"><el-form-item label="名称" prop="name"><el-input v-model="markerForm.name" placeholder="请输入标记名称" /></el-form-item><el-form-item label="纬度" prop="lat"><el-input v-model="markerForm.lat" type="number" placeholder="请输入纬度" /></el-form-item><el-form-item label="经度" prop="lng"><el-input v-model="markerForm.lng" type="number" placeholder="请输入经度" /></el-form-item><el-form-item label="描述" prop="description"><el-input v-model="markerForm.description" type="textarea" :rows="2" placeholder="请输入描述" /></el-form-item><el-form-item><el-button type="primary" @click="saveMarker">保存</el-button><el-button @click="cancelMarker">取消</el-button></el-form-item></el-form></div><div class="markers-list" v-if="markers.length > 0"><h4>已保存的标记</h4><el-table :data="markers" style="width: 100%"><el-table-column prop="name" label="名称" /><el-table-column prop="description" label="描述" /><el-table-column label="坐标" width="200"><template #default="scope">{{ scope.row.lat.toFixed(6) }}, {{ scope.row.lng.toFixed(6) }}</template></el-table-column><el-table-column label="操作" width="250"><template #default="scope"><el-button size="small" @click="centerOnMarker(scope.row)" :icon="Location">定位</el-button><el-button size="small" type="primary" @click="navigateToMarker(scope.row)" :icon="Position">导航</el-button><el-button size="small" type="danger" @click="removeMarker(scope.$index)" :icon="Delete">删除</el-button></template></el-table-column></el-table></div></div> </template><script setup> import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue' import { ElMessage, ElMessageBox } from 'element-plus' import { Location, Position, Search, FullScreen, Fold, Promotion, Guide, Place, School, Delete } from '@element-plus/icons-vue' import { h } from 'vue'// 天地图API密钥 const TIANDITU_KEY = '08pfngl6ytjjs8sjgjeef7ac2lsiissc'// 响应式数据 const markers = ref([]) const showMarkerForm = ref(false) const markerForm = ref({name: '',lat: '',lng: '',description: '' })// 地图相关变量 let markerObjs = [] let mapObj = null let mapTypeControl = null// 功能开关参数 const mapOptions = reactive({showSearch: true,showLayerSwitch: true,showFullscreen: true })// 其他状态 const isFullscreen = ref(false) const searchKeyword = ref('') const searchLoading = ref(false)// 全屏切换 function toggleFullscreen() {const el = document.getElementById('tianditu-map')?.parentElementif (!el) returnif (!isFullscreen.value) {if (el.requestFullscreen) el.requestFullscreen()else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen()else if (el.mozRequestFullScreen) el.mozRequestFullScreen()else if (el.msRequestFullscreen) el.msRequestFullscreen()isFullscreen.value = true} else {if (document.exitFullscreen) document.exitFullscreen()else if (document.webkitExitFullscreen) document.webkitExitFullscreen()else if (document.mozCancelFullScreen) document.mozCancelFullScreen()else if (document.msExitFullscreen) document.msExitFullscreen()isFullscreen.value = false} }// 监听全屏状态变化 document.addEventListener('fullscreenchange', () => {isFullscreen.value = !!document.fullscreenElement })// 搜索相关函数 function highlightKeyword(text, keyword) {if (!keyword) return textconst reg = new RegExp(`(${keyword})`, 'gi')return text.replace(reg, '<span class="search-highlight">$1</span>') }function getPoiIcon(catalog) {if (!catalog) return h(Location)if (catalog.includes('地铁')) return h(Promotion)if (catalog.includes('公交')) return h(Guide)if (catalog.includes('火车站') || catalog.includes('高铁')) return h(Place)if (catalog.includes('学校')) return h(School)return h(Location) }async function fetchSearchSuggestions(query, cb) {if (!query) { cb([]); return }const url = `https://api.tianditu.gov.cn/search?postStr={\"keyWord\":\"${encodeURIComponent(query)}\",\"level\":\"9\",\"queryType\":\"1\",\"start\":0,\"count\":10}&type=query&tk=${TIANDITU_KEY}`try {const res = await fetch(url)const data = await res.json()if (data && data.pois && Array.isArray(data.pois)) {cb(data.pois.map(item => ({value: item.name,address: item.address,catalog: item.catalog,lon: item.lonlat.split(' ')[0],lat: item.lonlat.split(' ')[1]})))} else {cb([])}} catch { cb([]) } }function handleSelectSuggestion(item) {if (item.lon && item.lat && mapObj) {mapObj.centerAndZoom(new window.T.LngLat(item.lon, item.lat), 16)// 添加高亮markerconst marker = new window.T.Marker(new window.T.LngLat(item.lon, item.lat))mapObj.addOverLay(marker)// 弹窗显示详细信息const popupContent = `<div style='min-width:180px;'><h4 style='margin:0 0 8px 0;'>${item.value}</h4><div style='font-size:13px;color:#666;margin-bottom:6px;'>${item.catalog || ''}</div><div style='font-size:12px;color:#999;margin-bottom:8px;'>${item.address || ''}</div><div style='font-size:12px;color:#999;'>坐标: ${item.lat}, ${item.lon}</div></div>`const infoWin = new window.T.InfoWindow(popupContent, { offset: new window.T.Pixel(0, -20) })mapObj.openInfoWindow(infoWin, new window.T.LngLat(item.lon, item.lat))ElMessage.success('已定位到：' + item.value)} }// 动态加载天地图API function loadTiandituScript() {return new Promise((resolve, reject) => {if (window.T) {resolve()return}const script = document.createElement('script')script.src = `https://api.tianditu.gov.cn/api?v=4.0&tk=${TIANDITU_KEY}`script.onload = resolvescript.onerror = rejectdocument.head.appendChild(script)}) }// 初始化地图 async function initMap() {await loadTiandituScript()await nextTick()if (!window.T) {ElMessage.error('天地图API加载失败')return}mapObj = new window.T.Map('tianditu-map')mapObj.centerAndZoom(new window.T.LngLat(116.4074, 39.9042), 12)mapObj.enableScrollWheelZoom()mapObj.enableDoubleClickZoom()mapObj.enableKeyboard()// 添加控件 （图层切换）if (mapOptions.showLayerSwitch) {mapTypeControl = new window.T.Control.MapType()mapObj.addControl(mapTypeControl)}// 地图点击事件mapObj.addEventListener('click', onMapClick) }// 地图点击事件 function onMapClick(e) {markerForm.value.lat = e.latlng.getLat().toFixed(6)markerForm.value.lng = e.latlng.getLng().toFixed(6)showMarkerForm.value = true }// 标记相关函数 function saveMarker() {if (!markerForm.value.name || !markerForm.value.lat || !markerForm.value.lng) {ElMessage.warning('请填写完整信息')return}const markerData = {id: Date.now(),name: markerForm.value.name,lat: parseFloat(markerForm.value.lat),lng: parseFloat(markerForm.value.lng),description: markerForm.value.description}markers.value.push(markerData)addMarkerToMap(markerData)showMarkerForm.value = falseElMessage.success('标记保存成功') }function addMarkerToMap(markerData) {if (!window.T) returnconst marker = new window.T.Marker(new window.T.LngLat(markerData.lng, markerData.lat))marker.data = markerDatamarker.addEventListener('click', (e) => {showMarkerPopup(e, markerData)})mapObj.addOverLay(marker)markerObjs.push(marker)markerData._marker = marker }function showMarkerPopup(e, markerData) {const popupContent = `<div style='min-width:180px;'><h4 style='margin:0 0 8px 0;'>${markerData.name}</h4><div style='font-size:13px;color:#666;margin-bottom:6px;'>${markerData.description || ''}</div><div style='font-size:12px;color:#999;margin-bottom:8px;'>坐标: ${markerData.lat.toFixed(6)}, ${markerData.lng.toFixed(6)}</div><div style='display:flex;gap:8px;'><button onclick="window.tdtNavigate(${markerData.lat},${markerData.lng},'${markerData.name}')" style='background:#409EFF;color:#fff;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;'>导航</button><button onclick="navigator.clipboard.writeText('${markerData.lat},${markerData.lng}')" style='background:#67C23A;color:#fff;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;'>复制坐标</button></div></div>`const infoWin = new window.T.InfoWindow(popupContent, { offset: new window.T.Pixel(0, -20) })mapObj.openInfoWindow(infoWin, new window.T.LngLat(markerData.lng, markerData.lat)) }function cancelMarker() {showMarkerForm.value = falsemarkerForm.value = {name: '',lat: '',lng: '',description: ''} }function centerOnMarker(marker) {if (mapObj) {mapObj.centerAndZoom(new window.T.LngLat(marker.lng, marker.lat), 16)ElMessage.success('已定位到标记')} }function navigateToMarker(marker) {window.tdtNavigate(marker.lat, marker.lng, marker.name) }async function removeMarker(index) {const marker = markers.value[index]try {await ElMessageBox.confirm('确定要删除这个标记吗？', '警告', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})if (marker._marker) {mapObj.removeOverLay(marker._marker)const i = markerObjs.indexOf(marker._marker)if (i !== -1) markerObjs.splice(i, 1)}markers.value.splice(index, 1)ElMessage.success('标记已删除')} catch {} }async function searchLocation() {if (!searchKeyword.value.trim()) {ElMessage.warning('请输入地名')return}searchLoading.value = trueconst url = `https://api.tianditu.gov.cn/geocoder?ds={"keyWord":"${encodeURIComponent(searchKeyword.value)}"}&tk=${TIANDITU_KEY}`try {const res = await fetch(url)const data = await res.json()if (data && data.location) {const { lon, lat } = data.locationmapObj.centerAndZoom(new window.T.LngLat(lon, lat), 16)ElMessage.success('已定位到：' + searchKeyword.value)} else {ElMessage.warning('未找到地名')}} catch {ElMessage.error('地名搜索失败')}searchLoading.value = false }// 工具函数 function toggleMapType() {if (!mapTypeControl) returnmapTypeControl._switchMapType() }// 导航跳转函数（全局） window.tdtNavigate = function(lat, lng, name) {const url = `https://map.tianditu.gov.cn/navigation.html?lat=${lat}&lng=${lng}&name=${encodeURIComponent(name)}`window.open(url, '_blank') }// 生命周期 onMounted(async () => {await initMap() })onUnmounted(() => {if (mapObj) {markerObjs.forEach(marker => mapObj.removeOverLay(marker))markerObjs.length = 0mapObj = null}if (window.tdtNavigate) delete window.tdtNavigate }) </script><style scoped> .tianditu-map-container {position: relative;padding: 0;max-width: 100vw;height: 50vh;background: #f5f7fa; }.map-top-bar {position: absolute;top: 10px;left: 10px;z-index: 500;display: flex;flex-direction: row;align-items: center; }.search-weather-box {display: flex;align-items: center;background: #fff;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.08);padding: 8px 16px;gap: 16px; }.search-box-official {background: #fff;border: 1px solid #dcdfe6;box-shadow: 0 2px 8px rgba(0,0,0,0.08);border-radius: 8px;/* padding: 4px 12px; */padding: 0; }.search-input {width: 340px;font-size: 15px;border-radius: 8px;border: none;box-shadow: none; }.map-toolbar-top-right {position: absolute;top: 16px;right: 120px;z-index: 500;display: flex;flex-direction: row;gap: 8px;}.map-container {width: 100%;height: 100%;border-radius: 0;overflow: hidden;border: none;margin: 0; }.marker-form {position: absolute;left: 50px;top: 80px;z-index: 30;background: var(--el-bg-color-page);padding: 20px;border-radius: 8px;border: 1px solid var(--el-border-color-light); }.markers-list {position: absolute;right: 32px;bottom: 32px;z-index: 30;background: var(--el-bg-color-page);padding: 20px;border-radius: 8px;border: 1px solid var(--el-border-color-light);max-width: 400px;max-height: 300px;overflow: auto; }.markers-list h4 {margin-bottom: 15px;color: var(--el-color-primary); }.search-suggestion-item {display: flex;align-items: center;padding: 6px 12px;border-radius: 6px;transition: background 0.2s;cursor: pointer; }.search-suggestion-item.is-active, .search-suggestion-item:hover {background: #f0f7ff; }.search-suggestion-icon {margin-right: 8px;color: #409EFF;font-size: 18px;display: flex;align-items: center; }.search-suggestion-title {font-weight: 500;color: #222;margin-right: 8px; }.search-suggestion-type {color: #aaa;font-size: 13px;margin-left: 8px;margin-right: 8px; }.search-suggestion-meta {color: #999;font-size: 13px;flex: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }.search-highlight {color: #409EFF;background: #e6f7ff;border-radius: 2px;padding: 0 2px; }</style>
完结。
