uniapp中使用高德地图实现chooselocation功能

在uniapp中集成高德地图的chooseLocation功能时，如何正确调用API实现位置选择？官方示例中使用的是H5的JS API，但在uniapp环境下无法直接使用。是否需要引入原生SDK或使用uniapp的nvue页面？具体实现步骤和注意事项有哪些？调用后返回的坐标如何转换为uniapp可用的格式？

ionicwang 1楼

在uniapp中使用高德地图实现chooselocation功能，需引入高德地图JS SDK，调用AMap.plugin加载地点选择插件。通过uni.chooseLocation调用系统地图选点，或自定义地图页面实现选点功能，获取经纬度和地址信息。

nodeper 2楼

在 UniApp 中实现高德地图的 chooseLocation 功能，可以通过使用高德地图的 JavaScript API 结合 UniApp 的 WebView 或地图组件来实现。以下是具体步骤和示例代码：

实现步骤

申请高德地图 Key
前往高德开放平台注册账号，创建应用并获取 Web 端 Key（JavaScript API）。
在 UniApp 中引入高德地图
使用 web-view 组件加载高德地图页面，或通过 map 组件自定义实现。
调用选择位置功能
通过高德地图的 API 实现地点搜索与选择，并将结果返回给 UniApp。

示例代码（使用 web-view 实现）

1. 创建高德地图 HTML 页面（如 `map.html`）

将此文件放在项目的 hybrid/html 目录下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>选择位置</title>
    <script src="https://webapi.amap.com/maps?v=2.0&key=你的高德Key"></script>
</head>
<body>
<div id="mapContainer" style="height:100vh;"></div>
<script>
    var map = new AMap.Map('mapContainer', {
        zoom: 13,
        center: [116.397428, 39.90923] // 默认北京
    });

    // 添加地图点击事件
    map.on('click', function(e) {
        var lnglat = e.lnglat;
        // 逆向地理编码获取地址信息
        var geocoder = new AMap.Geocoder();
        geocoder.getAddress(lnglat, function(status, result) {
            if (status === 'complete' && result.regeocode) {
                var address = result.regeocode.formattedAddress;
                // 通过 UniApp 的 postMessage 返回数据
                window.uni.postMessage({
                    data: {
                        name: address,
                        address: address,
                        latitude: lnglat.lat,
                        longitude: lnglat.lng
                    }
                });
            }
        });
    });
</script>
</body>
</html>

2. 在 UniApp 页面中使用 web-view

<template>
    <view>
        <web-view :src="mapUrl" @message="onMessage"></web-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            mapUrl: '/hybrid/html/map.html' // 本地 HTML 路径
        };
    },
    methods: {
        onMessage(e) {
            const data = e.detail.data[0];
            // 返回位置信息，可存储或使用
            uni.showModal({
                title: '选择的位置',
                content: `地址：${data.address}\n经纬度：${data.latitude}, ${data.longitude}`,
                showCancel: false
            });
            // 返回上一页或处理数据
            uni.navigateBack();
        }
    }
};
</script>

注意事项

Key 配置：替换 你的高德Key 为实际申请的 Key。
路径问题：确保 map.html 放在正确目录，UniApp 打包时需配置静态资源。
权限申请：若需定位，在 manifest.json 中配置定位权限。