当前位置:首页 > uni-app

uniapp 分享位置

2026-02-06 04:28:06uni-app

uniapp 分享位置实现方法

在 uniapp 中实现分享位置功能,通常需要调用微信小程序、H5 或 App 的原生 API。以下是不同平台的实现方式:

微信小程序平台

使用 wx.openLocation API 打开微信内置地图,并显示指定位置:

uni.openLocation({
  latitude: 39.90469, // 纬度
  longitude: 116.40717, // 经度
  name: '北京市', // 位置名称
  address: '北京市东城区', // 详细地址
  success: function () {
    console.log('打开位置成功');
  }
});

H5 平台

通过 window.open 调用第三方地图服务(如高德、百度地图):

// 高德地图
window.open(`https://uri.amap.com/marker?position=116.40717,39.90469&name=北京市`);

// 百度地图
window.open(`https://api.map.baidu.com/marker?location=39.90469,116.40717&title=北京市&output=html`);

App 平台

使用原生地图插件或调用系统地图:

// 使用 uni-app 官方地图插件
plus.maps.openSysMap({
  latitude: 39.90469,
  longitude: 116.40717,
  name: '北京市',
  address: '北京市东城区'
});

跨平台兼容方案

通过条件编译实现多平台兼容:

// #ifdef MP-WEIXIN
wx.openLocation({
  latitude: 39.90469,
  longitude: 116.40717,
  name: '北京市',
  address: '北京市东城区'
});
// #endif

// #ifdef H5
window.open(`https://uri.amap.com/marker?position=116.40717,39.90469&name=北京市`);
// #endif

// #ifdef APP-PLUS
plus.maps.openSysMap({
  latitude: 39.90469,
  longitude: 116.40717,
  name: '北京市',
  address: '北京市东城区'
});
// #endif

注意事项

  • 微信小程序需要先调用 wx.getLocation 获取用户授权
  • App 端可能需要配置原生地图插件
  • H5 端需要确保域名在白名单内
  • 各平台对坐标系的处理可能不同(如微信使用 GCJ-02)

uniapp 分享位置

标签: 位置uniapp
分享给朋友:

相关文章

vue实现位置的过渡

vue实现位置的过渡

Vue 过渡动画实现位置变化 Vue 提供了 <transition> 和 <transition-group> 组件来处理元素位置变化的过渡效果。以下是几种常见实现方式:…

uniapp消息推送

uniapp消息推送

uniapp消息推送实现方法 uniapp支持多种消息推送方式,包括uniPush、个推、极光推送等。以下为常见实现方案: uniPush(官方推荐) uniapp官方提供的推送服务,基于DClou…

uniapp隐藏滚动条

uniapp隐藏滚动条

在UniApp中隐藏滚动条可以通过以下几种方法实现,具体根据使用场景选择: 全局样式设置(APP/H5) 通过修改全局CSS样式隐藏滚动条,适用于所有页面: ::-webkit-scrollbar…

uniapp实名认证

uniapp实名认证

uniapp实名认证实现方法 使用uniCloud实名认证插件 uniapp官方提供了uniCloud的实名认证插件,可快速集成到项目中。插件支持身份证识别、活体检测等功能,需在uniCloud控制台…

uniapp请求超时处理

uniapp请求超时处理

uniapp请求超时处理方法 在uniapp中处理请求超时可以通过多种方式实现,以下是几种常见的处理策略: 设置全局请求超时时间 在main.js中配置全局请求超时时间,适用于所有请求: uni…

uniapp旋转横屏

uniapp旋转横屏

实现横屏模式的方法 在UniApp中实现横屏模式,可以通过配置页面方向或使用CSS旋转实现。以下是两种常见方法: 修改manifest.json配置 在项目的manifest.json文件中…