【uniapp小程序实战】—— 使用腾讯地图获取定位_uniapp 腾讯地图_软件开发什么软件可以免费提供获取地址位置的服务

address 地址信息说明

示例

uni.getLocation({
type: ‘wgs84’,
success: function (res) {
console.log(‘当前位置的经度：’ + res.longitude);
console.log(‘当前位置的纬度：’ + res.latitude);
}
});

#注意

H5 平台

• 在较新的浏览器上，H5 端获取定位信息，要求部署在 https 服务上，本地预览（localhost）仍然可以使用 http 协议。
• 国产安卓手机上，H5若无法定位，检查手机是否开通位置服务、GPS，ROM是否给该浏览器位置权限、浏览器是否对网页弹出请求给予定位的询问框。
• 安卓手机 在原生App内嵌H5时，无法定位需要原生App处理Webview。
• 移动端浏览器 普遍仅支持GPS定位，在GPS信号弱的地方可能定位失败。
• PC 设备 使用 Chrome 浏览器的时候，位置信息是连接谷歌服务器获取的，国内用户可能获取位置信息失败。
• 微信公众号可使用微信js sdk，详见
• 2.9.9 版本以上，优化 uni.getLocation 支持通过 IP 定位。默认通过 GPS 获取，如果获取失败，备选方案是通过 IP 定位获取，需填写三方地图服务平台的秘钥（key）。key配置：manifest.json —> H5配置 —> 定位和地图 —> key。

App 平台

• Android由于谷歌服务被墙，或者手机上没有GMS，想正常定位就需要向高德等三方服务商申请SDK资质，获取AppKey。否则打包后定位就会不准。云打包时需要在manifest的SDK配置中填写 Appkey。在 manifest 可视化界面有详细申请指南，详见：https://ask.dcloud.net.cn/article/29。离线打包自行在原生工程中配置。注意包名、appkey、证书信息必须匹配。真机运行可以正常定位，是因为真机运行基座使用了DCloud向高德申请的sdk配置，打包后必须由开发者自己申请。如果手机自带GMS且网络环境可以正常访问google定位服务器，此时无需在 manifest 填写高德定位的 sdk 配置。
• 注意手机自身要开启定位、同时要给App赋予定位权限。权限判断可参考：https://uniapp.dcloud.net.cn/api/system/getappauthorizesetting.html
• <map> 组件默认为国测局坐标 gcj02，调用 uni.getLocation 返回结果传递给 <map> 组件时，需指定 type 为 gcj02。
• 定位 和 map 是两个东西。通过 getLocation 得到位置坐标后，可以在任意map地图上展示，比如定位使用高德，地图使用 google 的 webview 版地图。如果坐标系不同时，注意转换坐标系。
• 如果使用 web-view 加载地图，无需在manifest里配地图的sdk配置。
• 持续定位方案：iOS端可以申请持续定位权限，参考。Android如果进程被杀，代码无法执行。可以使用 unipush ，通过服务器激活App，执行透传消息，让App启动然后采集位置。Android上，即使自己写原生插件做后台进程，也很容易被杀，unipush是更合适的方案
• 3.3.0 版本以上 优化系统定位模块，可不使用三方定位SDK的进行高精度定位，具体参考：系统定位。

小程序平台

• api默认不返回详细地址中文描述。需要中文地址有2种方式：1、使用高德地图小程序sdk，在app和微信上都可以获得中文地址，参考。2、只考虑app，使用plus.geolocation也可以获取中文地址。manifest里的App SDK配置仅用于app，小程序无需在这里配置。
• 可以通过用户授权API来判断用户是否给应用授予定位权限，详见
• 在 微信小程序 中，当用户离开应用后，此接口无法调用，需要申请 后台持续定位权限 ，另外新版本中需要使用 wx.onLocationChange 监听位置信息变化；当用户点击“显示在聊天顶部”时，此接口可继续调用

---

补充： 以上内容为 官方文档 搬运过来的，详情可点击链接跳转至官网。

我们本次开发的是小程序，需要注意的是，我们本次小程序获取定位使用的是腾讯位置服务，所以需要申请腾讯位置服务的SDK。

2、腾讯位置服务平台申请密钥和下载SDK

申请步骤：详细文档

2.1 申请开发者秘钥

点击文档中的申请秘钥链接，跳转至腾讯位置服务平台，如下图所示申请即可。（没有账号的先注册账号）

2.2 开通webserviceAPI服务

开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)

1、申请Key

2、复制申请好的Key值等待使用

2.3 下载微信小程序JavaScriptSDK

微信小程序JavaScriptSDK下载地址（点击文字即可跳转）

下载好解压完成后，我们一般放在根目录下面的common目录下（如下图）

2.4 安全域名设置

安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com

到这里终于算是申请完了，在配置一下就好了。

3、配置manifest.json文件

“permission” : {
“scope.userLocation” : {
“desc” : “为了您更好的体验，请确认获取您的位置”
}
}
“requiredPrivateInfos”: [“getLocation”, “chooseLocation”]

4、示例代码展示

4.1 引用下载好的SDK

这里我放到了common目录下：

import QQMapWX from “…/…/common/qqmap-wx-jssdk.js”

4.2 获取定位函数示例

methods: {
//获取位置信息
async getLocationInfo() {
return new Promise((resolve) => {
//位置信息默认数据
let location = {
longitude: 0,
latitude: 0,
province: “”,
city: “”,
area: “”,
street: “”,
address: “”,
};
uni.getLocation({
type: “gcj02”,
success(res) {
location.longitude = res.longitude;
location.latitude = res.latitude;
// 腾讯地图Api
const qqmapsdk = new QQMapWX({
key: ‘XXXXXXXXXXXXXXXXXXXXXXXX’ //这里填写自己申请的key
});
qqmapsdk.reverseGeocoder({
location,
success(response) {
let info = response.result;
console.log(info);
location.province = info.address_component.province;
location.city = info.address_component.city;
location.area = info.address_component.district;
location.street = info.address_component.street;
location.address = info.address;
resolve(location);
},
});
},
fail(err) {
console.log(err)
resolve(location);
},
});
});
}
}

4.3 调用函数

函数调用可以自己去选择在页面加载的时候加载，或者有一个触发条件。（我是用的页面加载，所以放在了onload方法中）。

async onLoad() {
const location = await this.getLocationInfo();
this.position = location.address
},

注意：这里使用的this.position，是在data中定义的，代码示例中没有写。需要自己在data方法中定一个position变量

4.4 页面渲染

当前定位：{{position}}

5、效果展示

到这里就结束啦！想要的获取用户位置信息的功能就实现啦。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/608548