uniapp&&微信小程序中打开腾讯地图获取用户位置信息

这篇具有很好参考价值的文章主要介绍了uniapp&&微信小程序中打开腾讯地图获取用户位置信息。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

个人项目地址: SubTopH前端开发个人站

(自己开发的前端功能和UI组件,一些有趣的小功能,感兴趣的伙伴可以访问,欢迎提出更好的想法,私信沟通,网站属于静态页面)

uniapp&&微信小程序中打开腾讯地图获取用户位置信息,uni-app,微信小程序,小程序

SubTopH前端开发个人站https://subtop.gitee.io/subtoph.github.io/#/home

以上 👆 是个人前端项目,欢迎提出您的建议😊

以下uniapp&&微信小程序中打开腾讯地图获取用户位置信息

实现的效果

uniapp&&微信小程序中打开腾讯地图获取用户位置信息,uni-app,微信小程序,小程序

第一步:首先登录微信公众平台 , 需要用到AppID

uniapp&&微信小程序中打开腾讯地图获取用户位置信息,uni-app,微信小程序,小程序

第二步: 注册登录腾讯位置服务

注册需要手机号和邮箱确认,然后创建应用

uniapp&&微信小程序中打开腾讯地图获取用户位置信息,uni-app,微信小程序,小程序

创建后点击添加key

uniapp&&微信小程序中打开腾讯地图获取用户位置信息,uni-app,微信小程序,小程序

uniapp&&微信小程序中打开腾讯地图获取用户位置信息,uni-app,微信小程序,小程序

添加后会生成key,后面会用到这个key

uniapp&&微信小程序中打开腾讯地图获取用户位置信息,uni-app,微信小程序,小程序

第三步: 登录微信公众平台,进入开发管理- -> 开发设置 添加 服务器域名

uniapp&&微信小程序中打开腾讯地图获取用户位置信息,uni-app,微信小程序,小程序

 第四步:在 manifest.json 文件 Web配置中,定位和地图勾选腾讯地图,将自己的腾讯地图的 Key 粘贴至此。

uniapp&&微信小程序中打开腾讯地图获取用户位置信息,uni-app,微信小程序,小程序

 代码中

uniapp&&微信小程序中打开腾讯地图获取用户位置信息,uni-app,微信小程序,小程序

 第五步:以上配置全部完成下面是开发代码

点击按钮

<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

我们需要处理  获取  [省,市,县,详细地址]

/**
 * 处理 北京市北京市丰台区北大地四里甲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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包