uniapp app接入天地图

### UniApp 中接入天地图服务 在 UniApp 项目中接入天地图服务，可以通过引入天地图 API 并完成必要的配置来实现。以下是详细的教程以及示例代码。 #### 一、申请天地图 Key 为了使用天地图的服务，首先需要前往天地图官网注册账号并申请访问密钥（API Key）。具体操作流程如下： - 登录 [天地图开放平台](http://www.tianditu.gov.cn/)。 - 进入开发者中心，创建应用并获取对应的 API 密钥[^1]。 #### 二、HTML 页面集成天地图 在 UniApp 的 `pages.json` 文件中定义 H5 页面，并通过 HTML 和 JavaScript 脚本加载天地图 SDK。 ##### 配置页面结构 编辑目标页面的 `.vue` 文件，在 `<template>` 标签内嵌入地图容器： ```html <template> <view class="container"> <!-- 地图容器 --> <div id="mapContainer" style="width: 100%; height: 400px;"></div> </view> </template> ``` ##### 加载天地图脚本 在 `onLoad` 生命周期方法中动态加载天地图 JS 库，并初始化地图实例。 ```javascript <script> export default { data() { return { mapKey: '您的天地图API密钥', // 替换为您自己的API Key }; }, onLoad() { this.loadTiandituMap(); }, methods: { loadTiandituMap() { const script = document.createElement('script'); script.src = `https://api.tianditu.gov.cn/api?v=4.0&tk=${this.mapKey}`; script.onload = () => { this.initMap(); // 初始化地图 }; document.body.appendChild(script); }, initMap() { var options = { center: new T.Map.Point(116.397, 39.908), // 设置初始坐标为中心点 zoom: 12, // 初始缩放级别 layers: [ new T.TileLayer.TdtVec(), // 添加矢量底图层 new T.TileLayer.TdtCva(), // 添加标注覆盖物 ], }; var map = new T.Map('mapContainer', options); // 创建地图实例 console.log('地图已成功加载:', map); // 获取用户当前位置 navigator.geolocation.getCurrentPosition( (position) => { const userLocation = new T.Map.Point(position.coords.longitude, position.coords.latitude); map.setCenter(userLocation); // 将地图中心移动到用户位置 }, (error) => { console.error('无法获取地理位置:', error.message); } ); }, }, }; </script> ``` 上述代码完成了以下功能： 1. 动态加载天地图 JS SDK。 2. 使用指定的 API Key 初始化地图组件。 3. 显示默认的地图视图，并支持设置自定义中心点和缩放比例。 #### 三、扩展功能开发 除了基本的地图展示外，还可以进一步实现其他高级功能，例如标记点位、路径规划等。 ##### 示例：添加标记点 可以在地图上添加特定地点的标记图标。 ```javascript methods: { addMarker(mapInstance) { const markerPoint = new T.Map.Point(116.397, 39.908); // 定义标记的位置 const markerIcon = new T.Icon({ iconUrl: '/static/marker.png', // 自定义图标资源路径 iconSize: new T.Size(32, 32), }); const marker = new T.Marker(markerPoint, { icon: markerIcon }); mapInstance.addOverLay(marker); // 向地图添加标记 }, }, ``` 调用此函数即可向地图添加新的标记点。 --- ###