当前位置：首页 > uni-app

uniapp 分享位置

2026-03-05 06:09:44uni-app

实现分享位置功能

在UniApp中实现分享位置功能，可以通过调用微信小程序或H5的API来完成。以下是具体实现方法：

微信小程序环境 使用wx.openLocationAPI打开地图查看位置，并支持分享：

uniapp 分享位置

uni.getLocation({
  type: 'gcj02',
  success: function(res) {
    const latitude = res.latitude
    const longitude = res.longitude
    uni.openLocation({
      latitude: latitude,
      longitude: longitude,
      name: '当前位置',
      address: '详细地址信息'
    })
  }
})

H5环境 使用浏览器地理定位API获取位置后生成地图链接：

uniapp 分享位置

if(navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    const lat = position.coords.latitude
    const lng = position.coords.longitude
    const mapUrl = `https://maps.google.com?q=${lat},${lng}`
    window.open(mapUrl)
  })
}

跨平台兼容方案

通过条件编译实现多端兼容：

// #ifdef MP-WEIXIN
wx.getLocation({
  type: 'wgs84',
  success(res) {
    wx.openLocation({
      latitude: res.latitude,
      longitude: res.longitude
    })
  }
})
// #endif

// #ifdef H5
if (window.navigator.geolocation) {
  window.navigator.geolocation.getCurrentPosition(
    position => {
      const { latitude, longitude } = position.coords
      window.open(`https://www.google.com/maps/@${latitude},${longitude},15z`)
    }
  )
}
// #endif

注意事项

微信小程序需要配置权限：在manifest.json中添加"requiredPrivateInfos": ["getLocation"]
iOS应用需要配置定位权限描述
高德/百度地图SDK需要单独申请密钥
用户可能拒绝位置权限，需要做好错误处理

第三方地图集成

对于更复杂的地图功能，可以集成第三方SDK：

// 高德地图示例
const map = new AMap.Map('container', {
  center: [116.397428, 39.90923],
  zoom: 13
})

// 百度地图示例
const map = new BMap.Map("container")
const point = new BMap.Point(116.404, 39.915)
map.centerAndZoom(point, 15)

以上方法可根据具体需求选择实现，注意不同平台的API差异和权限要求。