uniapp 加载天地图 入门指导

展示：

首先前往网址：

进入控制台：

添加应用获取key:

复制这个key.

再次前往首页：因为我是展示地图，并不获取数据，所以使用 web端开发，也就是在网页端显示地图组件：

入门指导就是教你如何加载地图，加载地图之后，才能之后 查看代码示例来了解更多的功能：

关键来了！

所以，也就是在uniapp中做好这两个即可：

<template>
  <view class="container">
    <view id="mapDiv" style="width: 100%; height: 100%;"></view>
  </view>
</template>

<script>
import config from '@/config.js'

export default {
  onReady() {
    // 页面加载完成后初始化地图
    this.initMap();
  },
  methods: {
    initMap() {
      // 引入天地图API脚本
      const script = document.createElement('script');
      script.src = "http://api.tianditu.gov.cn/api?v=4.0&tk=" + config.tiandimap_key;  // 替换为你的天地图密钥
      script.onload = () => {
        this.createMap();
      };
      document.body.appendChild(script);
    },
    createMap() {
      // 初始化地图
      const map = new T.Map('mapDiv');
      map.centerAndZoom(new T.LngLat(121.49128 , 31.21221), 15);  // 设置中心点和缩放级别

      // 添加点击事件监听
      map.addEventListener('click', (event) => {
        const lngLat = event.lnglat;  // 获取点击位置的经纬度
        console.log('经度:', lngLat.getLng(), '纬度:', lngLat.getLat());
		console.log(lngLat.getLng(), ',', lngLat.getLat());
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>

解释：