uni-app 调用百度地图定位在map组件上无法显示标识

发布于 1周前 作者 vueper 来自 Uni-App

uni-app 调用百度地图定位在map组件上无法显示标识

操作步骤：

  • 云打包后调用百度地图定位，在map组件上无法显示标识

预期结果：

  • 正常定位显示目的地标识

实际结果：

  • 调用百度地图定位，云打包在map组件上无法显示目标标识，本地调试基座可正常显示。
  • 定位的位置也不一样，本地调试基座是准确的，云打包不准。

bug描述：

  • 调用百度地图定位，云打包在map组件上无法显示目标标识，本地调试基座可正常显示。
  • 定位的位置也不一样，本地调试基座是准确的，云打包不准。
Harmonyos Next教程
2 回复

定位偏差也非常大


在使用 uni-app 开发应用时，若遇到调用百度地图定位后无法在 map 组件上显示标识的问题，通常涉及几个关键点：获取定位数据、配置 map 组件、以及正确地在 map 组件上显示定位标识。以下是一个基本的代码示例，展示如何实现这一功能。

1. 引入百度地图 SDK

首先，确保已在项目中正确引入百度地图 SDK。在 manifest.json 中配置相关权限及 SDK 引用（具体步骤请参考百度地图官方文档）。

2. 获取定位数据

使用 uni-app 提供的定位 API 获取当前位置信息。

uni.getLocation({
    type: 'gcj02', // 坐标系类型
    success: function (res) {
        const latitude = res.latitude;
        const longitude = res.longitude;
        // 将坐标传递给 map 组件或用于显示标识
        updateMapMarkers([{ latitude, longitude }]);
    },
    fail: function (err) {
        console.error('获取位置失败：', err);
    }
});

3. 配置 map 组件

在页面的模板部分，配置 map 组件，并绑定 markers 数据。

<template>
    <view>
        <map
            id="map"
            :longitude="centerLongitude"
            :latitude="centerLatitude"
            :scale="scale"
            :markers="markers"
            show-location
            style="width: 100%; height: 300px;"
        ></map>
    </view>
</template>

4. 更新 markers 数据

在页面的脚本部分，定义并更新 markers 数据。

<script>
export default {
    data() {
        return {
            centerLatitude: 0, // 初始中心点纬度
            centerLongitude: 0, // 初始中心点经度
            scale: 15, // 缩放级别
            markers: [] // 标识点数组
        };
    },
    methods: {
        updateMapMarkers(newMarkers) {
            this.markers = newMarkers.map(marker => ({
                ...marker,
                iconPath: '/static/location-marker.png', // 自定义标识图标路径
                width: 50,
                height: 50
            }));
            // 更新中心点（可选）
            if (newMarkers.length) {
                this.centerLatitude = newMarkers[0].latitude;
                this.centerLongitude = newMarkers[0].longitude;
            }
        }
    },
    // 生命周期函数，页面加载时获取定位
    onLoad() {
        uni.getLocation(/* ... */); // 调用上面定义的获取定位函数
    }
};
</script>

注意事项

  • 确保 iconPath 指向有效的图片资源。
  • 根据实际需求调整 scale、latitude、longitude 等参数。
  • 处理定位失败的情况，如用户拒绝授权等。

通过上述步骤，你应该能够在 uni-app 的 map 组件上成功显示百度地图定位标识。如果问题依旧存在，请检查各步骤的配置是否正确，或参考百度地图及 uni-app 的官方文档进行进一步调试。

回到顶部