uniapp高德地图第三方接入

### 如何在 UniApp 中集成高德地图 API

#### 准备工作
为了能够在 UniApp 应用程序中成功集成高德地图 API，需完成如下准备工作：

- **获取高德 Key**
需要前往高德开放平台注册账号并创建应用来获得专属的 key。对于 Android 平台的应用来说，确保申请的是适用于该环境下的密钥[^1]。

- **设置安全通信域名**
如果计划使用 H5 页面调用接口，则还需配置合法的安全域名以保障数据传输的安全性。这一步骤通常是在开发者后台完成设定[^3]。

#### 编写代码实现功能

##### HTML 结构定义
首先，在页面模板文件 `.vue` 的 `<template>` 标签内构建基础布局结构：

<view class="container">
    <!-- 地图容器 -->
    <map id="myMap"></map>
</view>

##### JavaScript 方法编写
接着，在同一文件中的 `<script setup lang="ts">` 或者普通的 `<script>` 节点下加入必要的逻辑处理函数：

import { onMounted } from 'vue';

onMounted(() => {
    const map = new AMap.Map('myMap', {
        zoom: 10,
        center: [116.397428, 39.90923], // 默认中心坐标设为北京天安门位置
    });

    function getLocation() {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                console.log(`纬度:${position.coords.latitude}, 经度:${position.coords.longitude}`);
                
                // 更新地图视口到当前位置
                map.setCenter([position.coords.longitude, position.coords.latitude]);
            },
            () => alert('无法获取地理位置'),
            { enableHighAccuracy: true }
        );
    }

    // 初始化时尝试自动定位用户所在地点
    getLocation();
});

上述 TypeScript 代码片段展示了如何利用 `navigator.geolocation` 对象请求用户的地理信息，并据此调整显示的地图区域[^2]。

##### 添加样式控制
最后别忘了给对应的元素加上 CSS 来美化界面效果：

<style scoped>
.container {
    width: 100%;
    height: calc(100vh - var(--status-bar-height));
}

#myMap {
    width: 100%;
    height: 100%;
}
</style>

这样就完成了基本的地图展示以及基于浏览器内置能力的位置检索操作。如果想要进一步扩展更多高级特性比如路径规划、周边搜索等功能，则可以参照官方文档继续深入学习和实践[^4]。