javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > Uniapp地图定位

Uniapp实现地图获取定位功能(推荐)

作者:小钟H呀

本文详细介绍了如何在Uniapp项目中集成地图功能,实现定位获取,并解决微信小程序、APP、H5三端的兼容性问题,涵盖了环境准备、配置地图基础功能、获取用户定位、多平台适配要点以及常见问题及解决方案,感兴趣的朋友一起看看吧

摘要:本文将手把手教你如何在Uniapp项目中集成地图功能、实现定位获取,并解决微信小程序、APP、H5三端的兼容性问题🚀🚀🚀

一、环境准备

地图平台选择

申请开发者密钥

二、配置地图基础功能

2.1 微信小程序配置

manifest.json配置

"mp-weixin": {
  "appid": "你的小程序ID",
  "setting": {
    "urlCheck": false
  },
  "usingComponents": true,
  "permission": {
    "scope.userLocation": {
      "desc": "需要获取您的位置以提供地图服务"
    }
  },
  "requiredPrivateInfos": ["getLocation"]
}

页面中使用map组件

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

2.2 H5/APP配置(以高德地图为例)

manifest.json注入SDK

"h5": {
  "sdkConfigs": {
    "maps": {
      "amap": {
        "key": "你的高德Web端Key"
      }
    }
  }
},
"app": {
  "maps": {
    "amap": {
      "iosKey": "iOS端Key",
      "androidKey": "Android端Key"
    }
  }
}

通过uni.chooseLocation调用地图

uni.chooseLocation({
  success: (res) => {
    console.log('位置名称:' + res.name);
    console.log('经纬度:', res.latitude, res.longitude);
  }
});

三、获取用户定位

3.1 基础定位实现

// 获取经纬度
uni.getLocation({
  type: 'wgs84', // 微信小程序必须为wgs84
  success: (res) => {
    this.latitude = res.latitude;
    this.longitude = res.longitude;
  },
  fail: (err) => {
    uni.showToast({ title: '获取定位失败', icon: 'none' });
  }
});

3.2 定位转具体地址(逆地理编码)

// 需配合高德API(H5/APP示例)
import amap from '@/common/amap-wx.js'; // 从高德官网下载SDK
const amapPlugin = new amap.AMapWX({
  key: '你的高德Web端Key'
});
amapPlugin.getRegeo({
  location: `${longitude},${latitude}`,
  success: (data) => {
    console.log('详细地址:', data[0].regeocodeData.formatted_address);
  }
});

四、多平台适配要点

4.1 条件编译处理差异

<!-- 微信小程序使用原生map组件 -->
<!-- #ifdef MP-WEIXIN -->
<map ...></map>
<!-- #endif -->
<!-- H5/APP使用第三方地图 -->
<!-- #ifdef H5 || APP -->
<web-view :src="amapUrl"></web-view>
<!-- #endif -->

4.2 权限配置

Android:在manifest.json中添加:

"android": {
  "permissions": [
    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>"
  ]
}

iOS:需在manifest.json中勾选Location usage description

五、常见问题及解决方案

问题现象原因分析解决方案
微信小程序地图不显示未配置mapKey在微信公众平台申请并配置mapKey
H5定位失败非HTTPS环境本地开发使用Chrome开启--unsafely-treat-insecure-origin-as-secure
APP返回错误代码LOCATION_FAILED未开启定位权限检查manifest配置并引导用户手动开启权限
逆地理编码返回null未绑定安全域名(H5)在高德控制台添加当前域名白名单

注意点

到此这篇关于Uniapp实现地图获取定位功能的文章就介绍到这了,更多相关Uniapp地图获取定位内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文