uniapp show-location功能如何使用

在uniapp中，如何使用show-location功能实现地图定位展示？我在官方文档里没找到具体的使用示例，能否提供完整的代码实现步骤？包括如何引入地图组件、配置参数以及处理回调数据等细节。另外，这个功能在不同平台（H5、小程序、App）上的兼容性如何？需要注意哪些差异？

2 回复

在uniapp中，使用show-location功能需调用uni.openLocation()方法。传入经纬度、名称等参数即可打开地图显示位置。示例：

uni.openLocation({
  latitude: 39.908823,
  longitude: 116.397470,
  name: '天安门',
  address: '北京市东城区'
})

在 UniApp 中，show-location 功能通常用于在地图组件中显示特定位置。它不是一个独立的 API，而是 map 组件的一个属性。以下是使用方法：

1. 基本用法

在 map 组件中设置 show-location 属性为 true，可以显示用户的当前位置（需要用户授权地理位置权限）。

示例代码：

<template>
  <view>
    <map 
      :latitude="latitude" 
      :longitude="longitude" 
      :show-location="true" 
      style="width: 100%; height: 300px;"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.909,  // 默认纬度（例如北京）
      longitude: 116.397  // 默认经度
    };
  },
  onLoad() {
    // 可选：获取用户当前位置并更新坐标
    this.getLocation();
  },
  methods: {
    getLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          this.latitude = res.latitude;
          this.longitude = res.longitude;
        },
        fail: (err) => {
          uni.showToast({ title: '获取位置失败', icon: 'none' });
        }
      });
    }
  }
};
</script>

2. 关键说明

  • 权限配置：
    在 manifest.json 中配置地理位置权限（微信小程序需在后台申请权限）：
    "mp-weixin": {
  "permission": {
    "scope.userLocation": {
      "desc": "用于展示您的位置"
    }
  }
}
  • 坐标系：
    使用 uni.getLocation 时建议指定 type: 'gcj02'（中国常用坐标系）。
  • 效果：
    开启后地图会显示蓝色定位点，并自动移动到用户位置。

3. 注意事项

  • 仅支持在真机调试，模拟器可能无法正常定位。
  • 若需自定义定位图标，需使用 markers 属性替代。

通过以上步骤即可快速实现显示当前位置的功能。

回到顶部