uni-app 在h5使用uni.chooseLocation时地图数据一直处于加载中数据已返回使用的是腾讯地图

示例代码：

uni.chooseLocation({
success: function (res) {
},
})

操作步骤：

uni.chooseLocation({  
success: function (res) {  
},  
})

预期结果：

uni.chooseLocation({  
success: function (res) {  
},  
})

实际结果：

uni.chooseLocation({  
success: function (res) {  
},  
})

bug描述：

bug描述图片

信息类别	信息内容
产品分类	uniapp/H5
PC开发环境	Windows
PC开发环境版本	win10
浏览器平台	Edge
浏览器版本	9.0.5.9101（正式版本）（64 位）
项目创建方式	CLI
CLI版本号	3.0

htzhanglong 1楼•2 天前

在uni-app中，uni.chooseLocation API用于调用原生地图选择位置，但在H5平台上可能会遇到一些兼容性问题，尤其是在使用腾讯地图时。如果遇到地图数据一直处于加载中的情况，即使数据已经返回，这通常是由于地图SDK初始化或配置问题导致的。

以下是一个基于uni-app和腾讯地图SDK的示例代码，尝试解决这一问题。由于直接在H5上使用腾讯地图SDK较为复杂，且uni-app的uni.chooseLocation在H5上并不直接支持腾讯地图，这里提供一种替代方案：使用腾讯地图的JavaScript API在H5上实现类似功能。

步骤 1: 引入腾讯地图JavaScript API

在H5页面的<head>部分引入腾讯地图的JavaScript API：

<head>
    <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_TENCENT_MAP_KEY"></script>
</head>

请将YOUR_TENCENT_MAP_KEY替换为你的腾讯地图API密钥。

步骤 2: 实现位置选择功能

在页面的<script>部分，使用腾讯地图API实现位置选择功能：

export default {
    data() {
        return {
            map: null,
            marker: null,
        };
    },
    mounted() {
        this.initMap();
    },
    methods: {
        initMap() {
            this.map = new TMap.Map(document.getElementById('mapContainer'), {
                center: new TMap.LatLng(39.984120, 116.307484), // 默认中心点
                zoom: 14,
            });

            // 添加点击事件监听器
            this.map.on('click', (event) => {
                const { lng, lat } = event.lnglat;
                this.handleLocationSelected(lng, lat);
            });
        },
        handleLocationSelected(lng, lat) {
            // 用户选择了位置，这里可以处理选中的位置信息
            console.log('Selected Location:', lng, lat);

            // 如果已有marker，先移除
            if (this.marker) {
                this.map.remove(this.marker);
            }

            // 添加新的marker
            this.marker = new TMap.MultiMarker({
                map: this.map,
                styles: {
                    marker: new TMap.MarkerStyle({
                        width: 25,
                        height: 35,
                        anchor: { x: 16, y: 32 },
                        src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',
                    }),
                },
                geometries: [{
                    id: 'demo',
                    styleId: 'marker',
                    position: new TMap.LatLng(lat, lng),
                }],
            });
        },
    },
};

注意

确保mapContainer是页面中一个存在的DOM元素，用于承载地图。
这个示例中，我们通过监听地图的点击事件来获取用户选择的位置。
由于uni.chooseLocation在H5上不支持直接使用腾讯地图，这种方案提供了一种替代的实现方式。

这种方法虽然不能直接使用uni.chooseLocation，但能够在H5上实现类似的功能，满足用户选择位置的需求。

uni-app 在h5使用uni.chooseLocation时地图数据一直处于加载中 数据已返回 使用的是腾讯地图