文档章节

小程序:位置信息(Location)及微信小程序LBS解决方案实践

o
 osc_a22drz29
发布于 2019/03/23 11:43
字数 1157
阅读 15
收藏 0

精选30+云产品,助力企业轻松上云!>>>

 

目前在做的小程序需要使用到map组件以及小程序个性地图,涉及到的功能如下:

 

1# 获取用户当前位置,返回对应的省市区

2# 根据目的地的具体地址,显示在地图中的位置

3# 根据用户当前位置,计算出 与 接口返回的目的地数组中每条地址的相距距离

 

以下是具体实现过程:

 

1:申请开通个性化地图能力

 

个性化地图能力可在小程序后台“设置-开发者工具-腾讯位置服务”申请开通

 

对应的小程序后台的截图(已申请成功):

 

 

 2:申请开发者key及所需腾讯位置服务相关产品

 

 微信小程序LBS解决方案地址:https://lbs.qq.com/product/miniapp/home/index.html

 

2.1 申请申请开发者key(https://lbs.qq.com/console/key.html)

 

    以下填写数据仅为演示,开发时请按照相关规范填写!

 

 

     创建成功后,就会看到key:

 

 

 

  点击【进入:key设置】按钮,就会进入选择启用产品页面

 

  

 

 

这里需要注意两点:

1:确认自己需要启用哪些API,可根据 微信小程序JavaScript SDK https://lbs.qq.com/qqmap_wx_jssdk/index.html 自行查看

2: 安全域名设置,在“设置” -> “开发设置”中设置request合法域名,添加https://apis.map.qq.com

 

3:需求功能实现

 

    3.1 :获取用户当前位置,返回对应的省市区

            

   思路:通过wx.getLocation获取用户当前的经纬度,然后通过逆地址解析(坐标位置描述),从而获取所在位置的文字描述

   逆地址解析(坐标位置描述)Api : https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html

   

let QQMapWX = require('../../../vendors/qqmap-wx-jssdk.min.js');
let qqmapsdk;
Page({
    data: {
        receiver: '',
        area: ''
    },
    onLoad: function() {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: 'B65BZ-V4GCD-****-****-ZGFR2-M4BGY'
        });
    },
    getLocation() {
        let self = this;
        wx.showLoading({
            title: '正在获取,请稍后...',
            mask: true,
        });
        wx.getLocation({
            type: 'gcj02',
            success(res) {
                //逆地址解析
                self.getReverseGeo(res.latitude, res.longitude)
            },
            fail() {
                wx.showToast({
                    title: '获取位置信息失败,请稍后再试',
                    icon: 'none',
                    duration: 1500,
                    mask: true
                })
            }
        })
    },
    getReverseGeo(latitude, longitude) {
        let self = this;
        let addressComponent = '';
        //本接口提供由坐标到坐标所在位置的文字描述的转换,输入坐标返回地理位置信息和附近poi列表。
        //api:https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html
        qqmapsdk.reverseGeocoder({
            location: {
                latitude: latitude,
                longitude: longitude
            },
            get_poi: 1, //是否返回周边POI列表:1.返回;0不返回(默认),非必须参数
            success: function(res) {
                let adInfoName = res.result.ad_info.name.split(',').join('');
                wx.showToast({
                    title: '获取成功',
                    icon: 'success',
                    duration: 1000,
                    mask: true
                })
                self.setData({
                    area: adInfoName
                })
            },
            fail: function(error) {
                console.error(error);
                wx.showToast({
                    title: '获取位置信息失败,请稍后再试',
                    icon: 'none',
                    duration: 1500,
                    mask: true
                })
            },
            complete: function() {
                wx.hideLoading();
            }
        })
    }
})

  

  3.2: 根据目的地的具体地址,显示在地图中的位置

   

       思路:通过地址解析(地址转坐标),然后通过调用wx.openLocation 在微信内置地图查看位置

       地址解析(地址转坐标)Api : https://lbs.qq.com/qqmap_wx_jssdk/method-geocoder.html

 

let address = '杭州西湖风景区';
        qqmapsdk.geocoder({
            address: address, //地址参数
            success: function(res) {
                let latitude = res.result.location.lat;
                let longitude = res.result.location.lng;
                //通过经纬度打开地图页面
                wx.openLocation({
                    latitude,
                    longitude,
                    scale: 18
                })
            },
            fail: function(error) {
                wx.showToast({
                    title: error.message,
                    icon: 'none',
                    duration: 1500,
                    mask: true
                })
            },
            complete: function(res) {
                console.log(res);
            }
        })

 

开发工具调试效果:

 

   3.3: 根据用户当前位置,计算出 与 接口返回的目的地数组中每条地址的相距距离

        思路:调用wx.getLocation获取用户当前的经纬度,存起来;然后遍历目的地数组,通过地址解析(地址转坐标)获取对应的经纬度,然后通过距离计算api (calculateDistance(options:Object)) 计算出距离 

       距离计算Api : https://lbs.qq.com/qqmap_wx_jssdk/method-calculatedistance.html

 

let QQMapWX = require('../../vendors/qqmap-wx-jssdk.min.js');
let qqmapsdk;
Page({
    data: {
        areas: ['北京故宫博物院', '杭州西湖风景区', '苏州拙政园', '南京明孝陵'],
        userLocation: '',
        distance: []
    },
    onLoad() {
        qqmapsdk = new QQMapWX({
            key: 'B65BZ-V4GCD-****-****-ZGFR2-M4BGY'
        });
        //获取用户当前位置
        this.getUserPos();
    },
    getUserPos() {
        let self = this;
        wx.getLocation({
            type: 'wgs84',
            success(res) {
                self.data.userLocation = res.latitude + "," + res.longitude
                self.traverDistance() //遍历地址,算距离
            }
        })
    },
    traverDistance() {
        let self = this;
        let areas = self.data.areas;
        areas.forEach((item, index) => {
            qqmapsdk.geocoder({
                address: item, //地址参数
                success: function(res) {
                    let pos = res.result.location.lat + ',' + res.result.location.lng
                    self.calculateDistance(pos, index)
                },
                fail: function(error) {
                    console.error(error);
                    wx.showToast({
                        title: error.message,
                        icon: 'none',
                        duration: 1500,
                        mask: true
                    })
                },
                complete: function(res) {
                    console.log(res);
                }
            })
        });
    },
    calculateDistance(dest, index) {
        let self = this;
        qqmapsdk.calculateDistance({
            //mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行),不填默认:'walking',可不填
            //from参数不填默认当前地址
            //获取表单提交的经纬度并设置from和to参数(示例为string格式)
            from: self.data.userLocation || '', //若起点有数据则采用起点坐标,若为空默认当前地址
            to: dest, //终点坐标
            success: function(res) { //成功后的回调
                let res = res.result;
                for (let i = 0; i < res.elements.length; i++) {
                    self.data.distance[index] = res.elements[i].distance
                }
                self.setData({ //设置并更新distance数据
                    distance: self.data.distance
                });
            },
            fail: function(error) {
                console.error(error);
            },
            complete: function(res) {
                console.log(res);
            }
        });
    }
})

  

  

 

开发工具调试效果:

  

   

 

 以上。

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
微信小程序的概要

微信小程序的概要 学习小程序要了解一下什么事小程序,小程序开发前需要做哪些准备,微信小程序开发工具的使用,小程序中的目录结构解析,视图和渲染,事件。 小程序的配置详解,小程序的生命...

osc_ldkrekrp
2019/01/21
2
0
微信小程序的概要

微信小程序的概要 学习小程序要了解一下什么事小程序,小程序开发前需要做哪些准备,微信小程序开发工具的使用,小程序中的目录结构解析,视图和渲染,事件。 小程序的配置详解,小程序的生命...

达叔小生
2019/01/21
1
0
微信小程序-获取当前城市位置

微信小程序-获取当前城市位置 1, 获取当前地理位置,首先要拿到用户的授权wx.openSetting; 2,微信的getLocation接口,获取当前用户的地理位置(微信返回的是经纬度,速度等参数); 3,微...

whatwhowhy
2019/01/18
4.6K
0
行业微信小程序开发都有哪些解决方案

小程序自从上线就备受行业关注,也是目前互联网的热门话题之一,今天小编就为带来“不同行业微信小程序开发都有哪些解决方案”的信息分享。希望可以帮你更好的了解小程序行业动态。 需要小程...

HowRyan
05/12
1
0
微信小程序原生开发,我不想写wxss了 | 造轮子 less-to-wxss,一键将less编译成wxss

历史回顾: 为什么不在微信小程序中使用骨架屏,来提升用户体验? 微信小程序原生性能优化实践 微信小程序自定义组件 - 表格组件来啦 通过微信小程序来实现 “钉钉打卡” 记一次微信小程序项...

尤小小
06/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

R中“ =”和“ <-”赋值运算符有什么区别?

问题: What are the differences between the assignment operators = and <- in R? R中赋值运算符=和<-之间有什么区别? I know that operators are slightly different, as this example ......

fyin1314
18分钟前
12
0
JavaScript中的静态变量 - Static variables in JavaScript

问题: 如何在Javascript中创建静态变量? 解决方案: 参考一: https://stackoom.com/question/6RUF/JavaScript中的静态变量 参考二: https://oldbug.net/q/6RUF/Static-variables-in-Java...

法国红酒甜
今天
14
0
之间的区别 和

问题: I'm learning Spring 3 and I don't seem to grasp the functionality behind <context:annotation-config> and <context:component-scan> . 我正在学习Spring 3,并且似乎不太了解<......

javail
今天
11
0
业内首款,百度工业视觉智能平台全新亮相

本文作者:y****n 业内首款全国产化工业视觉智能平台——百度工业视觉智能平台亮相中国机器视觉展(Vision China),该平台所具有的核心AI能力完全自主可控,在质检、巡检等场景中具有高效、...

百度开发者中心
昨天
7
0
我们如何制作xkcd样式图? - How can we make xkcd style graphs?

问题: Apparently, folk have figured out how to make xkcd style graphs in Mathematica and in LaTeX . 显然,民间已经想出了如何在Mathematica和LaTeX中制作xkcd风格的图形。 Can we d......

富含淀粉
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部