个人项目地址: SubTopH前端开发个人站
(自己开发的前端功能和UI组件,一些有趣的小功能,感兴趣的伙伴可以访问,欢迎提出更好的想法,私信沟通,网站属于静态页面)
SubTopH前端开发个人站https://subtop.gitee.io/subtoph.github.io/#/home
以上 👆 是个人前端项目,欢迎提出您的建议😊
以下uniapp&&微信小程序中打开腾讯地图获取用户位置信息
实现的效果
第一步:首先登录微信公众平台 , 需要用到AppID
第二步: 注册登录腾讯位置服务
注册需要手机号和邮箱确认,然后创建应用
创建后点击添加key
添加后会生成key,后面会用到这个key
第三步: 登录微信公众平台,进入开发管理- -> 开发设置 添加 服务器域名
第四步:在 manifest.json 文件 Web配置中,定位和地图勾选腾讯地图,将自己的腾讯地图的 Key 粘贴至此。
代码中
第五步:以上配置全部完成下面是开发代码
点击按钮
<view class="positioning-logo" @click="getLocation">
<image
src="/static/image/positioning.png"
class="positioning-img"
/>
<text>定位</text>
</view>
js代码
const getLocation = () => {
uni.getSystemInfo({
success(res) {
let locationEnabled = res.locationEnabled; //判断手机定位服务是否开启
let locationAuthorized = res.locationAuthorized; //判断定位服务是否允许微信授权
if (locationEnabled == false || locationAuthorized == false) {
//手机定位服务(GPS)未授权
uni.showModal({
title: "授权",
content: "获取授权失败,是否前往授权?",
success: function (result) {
if (result.confirm) {
uni.openAppAuthorizeSetting();
}
},
fail: function () {
uni.showToast({
title: "请前往设置中授权位置信息",
icon: "none",
});
},
});
} else {
uni.chooseLocation({
success: function (response) {
console.log("位置信息:", response);
// response对象信息
// address: "北京市丰台区文体路3号"
// errMsg: "chooseLocation:ok"
// latitude: 39.85856
// longitude: 116.28616
// name: "北大地北京市丰台区人民政府(文体路)"
if (response.address) {
// 获取详细信息后,分割出省市县
const extractAddress = getArea(response.address);
// [省,市,县,详细地址]
userInfo.areaProvince = extractAddress.shift();
userInfo.areaCity = extractAddress.shift();
userInfo.areaRegion = extractAddress.shift();
userInfo.areaInfo = extractAddress.join(""); //详细地址
}
},
});
}
},
});
};
获取位置信息后 北京市北京市丰台区xxxxxxxxxxxxxxx
我们需要处理 获取 [省,市,县,详细地址]文章来源:https://www.toymoban.com/news/detail-637121.html
/**
* 处理 北京市北京市丰台区北大地四里甲12号楼(近丰台文化馆,地铁9号线丰台东大街站)
*
* ['北京市','北京市','丰台区','北大地四里甲12号楼(近丰台文化馆,地铁9号线丰台东大街站)]
*/
export const getArea = (str) => {
const reg = /.+?(省|市|自治区|自治州|县|区)/g;
const extract = str.match(reg);
extract.push(str.replace(reg, ''))
return extract
}
分别赋值省市县详细地址 文章来源地址https://www.toymoban.com/news/detail-637121.html
const extractAddress = getArea(response.address); //获取分割好的地区数组
userInfo.areaProvince = extractAddress.shift(); //赋值省级
userInfo.areaCity = extractAddress.shift(); //赋值市级
userInfo.areaRegion = extractAddress.shift(); //赋值区级
userInfo.areaInfo = extractAddress.join(""); //赋值详细地址
到了这里,关于uniapp&&微信小程序中打开腾讯地图获取用户位置信息的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!