关于天地图新手使用

1分钟带你了解学习天地图 适用新手 
天地图API (tianditu.gov.cn) 文档api  先去注册key
把脚本放到index.html文件内里

1. <!-- 天地图的官网申请的tk -->
2. <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=申请的key" type="text/javascript"></script>

复制代码

废话不多说 直接来代码
vue3写法

1. <template>
2.   <div id="mapDiv" class="map"></div>
3. </template>
5. <script setup>
6. import { ref, watch, onMounted, nextTick } from "vue"
7. import axios from 'axios';
8. const props = defineProps({
9.   data: {
10.     type: Object,
11.     default: () => {
12.       return {
13.         longitude: "113.762375",
14.         latitude: "39.761003"
15.       }
16.     }
17.   },
18.   title: {
19.     type: String,
20.     default: "北京天安门"
21.   }
22. })
24. const map = ref(null)
25. const zoom = ref(16)
26. let longitude = ref("")
27. let latitude = ref("")
29. const marker = ref(null);
30. const label = ref(null);
32. watch(
33.   () => props.data,
34.   (newValue, oldValue) => {
35.     initLoad()
36.   }
37. )
38. const initLoad = () => {
39.   // 获取经纬度及名称
40.   longitude.value = props.data.longitude
41.   latitude.value = props.data.latitude
43.   if (!map.value) {
44.     const T = window.T
45.     map.value = new T.Map("mapDiv", {
46.       // projection: "EPSG:4326",
47.       zoom: zoom.value, //设置默认放大缩小
48.       center: new T.LngLat(longitude.value, latitude.value) //设置当前地图中心点
49.     })
51.     // 添加点击事件监听器 点击跳转过去
52.     map.value.on('click', (e) => {
53.       // 更新地图中心
54.       longitude.value = e.lnglat.lng;
55.       latitude.value = e.lnglat.lat;
56.       map.value.panTo(e.lnglat);
58.       // 清除所有覆盖物
59.       let newMarker = map.value.getOverlays();
60.       newMarker.forEach((i)=>{
61.         console.log('i',i);
62.         if (i.id == 'oneId') {
63.           map.value.removeOverLay(i)
64.         } else{
65.           console.log('谁也不删');
66.         }
67.       })
68.       console.log('newMarker--地图上的所有点',newMarker);
70.       // 重新添加新的标记点
71.       addMarkers();
72.     });
73.     addMarkers();
74.   } else {
75.     map.value.panTo(new T.LngLat(longitude.value, latitude.value))
76.   }
78.   addMarkers()
79. }
82. // 添加标记点
83. const addMarkers = () => {
84.   // 更新图标实例
85.   const icon = new T.Icon({
86.     iconUrl: "src/assets/images/projectKanban/btn-bg-border.svg",
87.     iconSize: new T.Point(27, 27),
88.     iconAnchor: new T.Point(10, 25)
89.   });
91.   const point = new T.LngLat(longitude.value, latitude.value);
92.   marker.value = new T.Marker(point, icon); // 创建标注
94.   map.value.addOverLay(marker.value); // 使用 addOverLay
95.   marker.value.id = 'oneId'//添加id 确定要删除那个标点 用来区分
97.   handleSearch()//地址解析当前位置名称
99.   // 添加文字标签
100.   // label.value = new T.Label({
101.   //   text: props.title,
102.   //   position: new T.LngLat(longitude.value, latitude.value),
103.   //   offset: new T.Point(-60, 20)
104.   // });
105.   // map.value.addOverLay(label.value);
106. }
108. const handleSearch = async () => {
109.   try {
110.     const apiKey = '123456'; // 天地图 API 密钥
111.     let params = {
112.       lon: longitude.value,
113.       lat: latitude.value,
114.       ver: 1
115.     }
116.     const postStr = JSON.stringify(params);
117.     const url = `http://api.tianditu.gov.cn/geocoder?postStr=${encodeURIComponent(postStr)}&type=geocode&tk=${apiKey}`;
119.     const response = await axios.get(url);
121.     if (response.status === 200) {
122.       console.log('Geocoding result:', response.data.result);
123.       let res = response.data.result
125.       // 添加文字标签
126.       label.value = new T.Label({
127.         text: res.addressComponent.poi,
128.         position: new T.LngLat(longitude.value, latitude.value),
129.         offset:new T.Point(0, -20) // 居中于标记点上方
130.       });
131.       map.value.addOverLay(label.value);
132.       label.value.id = 'oneId'//添加id 确定要删除那个标点 用来区分
135.       // 处理响应数据
136.     } else {
137.       console.error('Request failed with status:', response.status);
138.     }
139.   } catch (error) {
140.     console.error('Error fetching geocoding data:', error.message);
141.   }
142. };
144. onMounted(async () => {
145.   await nextTick()
146.   initLoad()
147. })
148. </script>
150. <style>
151. .map {
152.   width: 100%;
153.   height: 380px;
154. }   
155. </style>

复制代码

vue2写法

1. <template>
2.   <div id='mapDiv' class="map"></div>
3. </template>
4.   
5. <script>
6. export default {
7.   name: "AmendProject",
8.   data() {
9.     return {
10.         tdtMap:{},//创建的地图map
11.       
12.     }
13.   },
14.   created(){
15.       this.getAddress()//获取当前位置 设置地图中心店
16.   },
17.   mounted(){
18.     //这里的initMap可以在拿到经纬度之后调用  也可以过去当前用户位置信息去调用
19.     // setTimeout(() => {
20.     //     this.initMap();
21.     // }, 500); // 延迟 0.5 秒以确保 API 加载完成
22.   },
23.   methods: {
24.     getAddress(){
25.       //利用浏览器Api进行获取位置信息
26.        navigator.geolocation.getCurrentPosition(
27.         position => {
28.           if (position.coords) {
29.             this.centerMap = {
30.               lng: position.coords.longitude,
31.               lat: position.coords.latitude,
32.             };
33.             //延时不要删除
34.             setTimeout(()=>{
35.               this.initMap()
36.             },500)
37.           }
38.         },
39.         error => {
40.           this.centerMap = {
41.             lng: 116.39128, // 默认经度
42.             lat: 39.90675   // 默认纬度
43.           };
44.           //延时不要删除
45.           setTimeout(()=>{
46.             this.initMap()
47.           },500)
48.           console.error('获取位置失败:', error);
49.         },
50.         { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
51.       );
52.     },
53.      // 创建天地图
54.     initMap() {
55.       try {
56.         let T = window.T;
58.         // 检查 T 对象是否存在
59.         if (typeof T === 'undefined' || !T.Map) {
60.           console.error('T object is not defined.');
61.           return;
62.         }
64.         // 确保 T 对象存在
65.         this.tdtMap = new T.Map("tdtMapDivID") // 使用正确的 ID
66.         // 设置显示地图的中心点和级别
67.         this.tdtMap.centerAndZoom(new T.LngLat(this.centerMap.lng, this.centerMap.lat), 15)
69.         //创建对象  逆地址解析用到 如果不需要可以不用
70.                     this.geocoder = new T.Geocoder();
72.         // 添加点击事件监听器
73.         this.tdtMap.on('click', (e) => {
74.           // 更新地图中心
75.           this.centerMap = e.lnglat;//修改经纬度
77.           this.tdtMap.panTo(e.lnglat);//设置中心点
78.           // 清除所有覆盖物
79.           let newMarker = this.tdtMap.getOverlays(); //获取当前地图的所有点
80.           newMarker.forEach((i)=>{
81.             // 这里通过id进行删除 这个id是根据你创建marker的时候设置的唯一标识
82.             if (i.id == 'oneId') {
83.               this.tdtMap.removeOverLay(i)
84.             } else{
85.               console.log('谁也不删');
86.             }
87.           })
89.           // 删除完成后  再次重新添加新的标记点
90.           this.addMarkers();
91.         })
92.         this.addMarkers()
93.       } catch (error) {
94.         console.log('error',error);
95.       }
96.     },
97.     // 设置标点
98.     addMarkers(){
99.       this.tdtMap.panTo(this.centerMap);//设置中心点
100.       //设置图标
101.       const icon = new T.Icon({
102.         iconUrl: "src/assets/images/projectKanban/btn-bg-border.svg",
103.         iconSize: new T.Point(27, 27),
104.         iconAnchor: new T.Point(10, 25)
105.       });
106.       const point = new T.LngLat(this.centerMap.lng, this.centerMap.lat);
107.       this.marker = new T.Marker(point, icon); // 创建标注
109.       this.tdtMap.addOverLay(this.marker); // 使用 addOverLay
110.       this.marker.id = 'oneId'//添加id 确定要删除那个标点 用来区分
111.       // this.marker.enableDragging()//可拖拽点
112.     },
114.     //城市下拉选变化
115.     cascaderElChange(e){
116.        this.mapCenterText = '河南省郑州市金水区星星充电站'
117.        this.searchAddress()
118.     },
119.     searchAddress(){
120.       this.tdtMap.clearOverLays();//清除所有标记
121.                   this.geocoder.getPoint(this.mapCenterText, this.searchResult);//逆地址
122.     },
123.     searchResult(result){
124.       if(result.getStatus() == 0){
125.         this.tdtMap.panTo(result.getLocationPoint(), 16);
126.         //创建标注对象
127.         let marker = new T.Marker(result.getLocationPoint());
128.         marker.id = 'oneId'//添加id 方便删除区分
129.         //向地图上添加标注
130.         this.tdtMap.addOverLay(marker);
131.       }else{
132.         alert(result.getMsg());
133.       }
134.     },
135.   }
136. </script>
137.    
138. <style>
139. .map {
140.   width: 100%;
141.   height: 380px;
142. }   
143. </style>

复制代码

方法都可以联合使用    vue3和vue2差别不大

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。