uniApp天地图卫星地图

### 实现 uniApp 中天地图卫星地图功能

为了在 uniApp 中实现天地图卫星地图功能，可以按照以下方法操作：

#### 创建天地图组件

定义模板结构如下所示[^1]：

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

此部分 HTML 结构提供了一个容器 `#mapDiv` 来承载天地图实例。

#### 初始化天地图并加载卫星图层

通过 JavaScript 或者 Vue.js 的生命周期钩子函数来初始化天地图对象，并设置其显示模式为卫星视图。下面是一个完整的例子，假设已经成功引入了 TMap API 脚本文件：

<script>
export default {
  mounted() {
    this.initTianDiTu();
  },
  methods: {
    initTianDiTu() {
      const map = new T.Map('mapDiv'); // 使用之前创建好的 div 容器 ID
      
      // 设置中心点坐标以及缩放级别
      map.centerAndZoom(new T.LngLat(116.407895, 39.903925), 15);

      // 添加卫星影像底图图层
      let ciaLayer = new T.TileLayer(
        'http://t{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=您的密钥'
      );
      
      // 开启卫星图像图层
      map.addOverlay(ciaLayer);
    }
  }
}
</script>

<style scoped>
/* 可选样式调整 */
#mapDiv {
  width: 100%;
  height: 100%;
}
</style>

注意：上述代码中的 `{s}` 是子域名占位符，实际应用时应替换为具体的数值（如 0 至 7），而 `您的密钥` 需要替换成申请到的有效访问令牌。

关于获取中文地址的问题，如果需要在使用过程中获得位置对应的中文描述，则可以根据具体需求选择合适的方法[^2]。对于仅限于 App 平台的应用场景来说，可以直接利用 `plus.geolocation` 接口；而对于跨平台的小程序开发而言，建议采用第三方服务提供商比如高德地图提供的 SDK 解决方案。