目前在做的小程序需要使用到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);
}
});
}
})

  

开发工具调试效果:

  

 以上。

小程序:位置信息(Location)及微信小程序LBS解决方案实践的更多相关文章

  1. 微信小程序开发系列五:微信小程序中如何响应用户输入事件

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

  2. 微信小程序开发系列二:微信小程序的视图设计

    大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...

  3. 微信小程序室内地图导航开发-微信小程序JS加载esmap地图

    一.在微信小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件: 1. 小 ...

  4. 微信小程序开发系列七:微信小程序的页面跳转

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

  5. 微信小程序开发系列四:微信小程序之控制器的初始化逻辑

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 这个教程的前两篇文章,介绍了如何 ...

  6. 从程序员的角度分析微信小程序(编程语言:用到什么学什么)

    从程序员的角度分析微信小程序(编程语言:用到什么学什么) 一.总结 一句话总结:微信小程序原理就是用JS调用底层native组件,和React Native非常类似.(需要时,用到时再学) 1.选择语 ...

  7. 微信小程序初使心得【微信小程序快速入门】

    摘要: 2016年推出微信小程序,时至今日,历经几个版本的更新,已形成了相对实用和稳定的服务平台.本文简单的介绍了微信小程序的入门用法,今后会继续关注和实践. 2016年推出微信小程序,时至今日,历经 ...

  8. 前端笔记之微信小程序(一)初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR

    一.小程序概述 2017 年 1 月 9 日小程序正式上线,腾讯开放了个人开发者开发小程序,小程序从此就开始火爆,这一年,小程序狂揽 4 亿用户.1.7 亿的日常活跃,上线 58 万个.这是一个巨大的 ...

  9. 微信小程序-从零开始制作一个跑步微信小程序

    来源:伯乐在线 - 王小树 链接:http://ios.jobbole.com/90603/ 点击 → 申请加入伯乐在线专栏作者 一.准备工作 1.注册一个小程序账号,得用一个没注册过公众号的邮箱注册 ...

随机推荐

  1. django2.0实现数据详情页展示的流程

    思路整理 1 先在urls.py中,定义路由获取的格式 url(r'^detail/(\d+)/$', views.blog_detail), 2 然后在views.py,定义数据获取的方法 def ...

  2. 关于常见的协议BSD,APACHE,MIT,GPL的理解

    其实BSD和APACHE和MIT协议类似,基本就是可以为所欲为,但是要尊重原来的作者. GPL协议是一个免费和开源的协议,只要用了GPL协议的类库源码等,也必须适应GPL协议. 意思就是把开源和免费进 ...

  3. jeesite快速开发平台(一)----简介

    转自:https://blog.csdn.net/u011781521/article/details/54880170

  4. Spring NamedParameterJdbcTemplate 详解

    转自: https://zmx.iteye.com/blog/373736 NamedParameterJdbcTemplate类是基于JdbcTemplate类,并对它进行了封装从而支持命名参数特性 ...

  5. js 和 java互调

    Java调JS JDK1.8 中Nashorn 比JavaScript性能更好 public static void main(String[] args) { long s = System.cur ...

  6. 如何在ArcMap中监听键盘鼠标事件(转)

    如何在ArcMap中监听键盘鼠标事件(转) Link: http://www.cnblogs.com/dyllove98/p/3155551.html 昨天有个朋友想要实现一个功能,就是在ArcMap ...

  7. python变量作用域

    [python变量作用域] 几个概念: python能够改变变量作用域的代码段是def.class.lamda. if/elif/else.try/except/finally.for/while 并 ...

  8. 安装 ORACLE 11G出现Error Message:PRVF-7535

    Error Message:PRVF-7535 : Proper architectureis not found on node "tsing" [Expected = &quo ...

  9. mysql 一次性插入上万条数据测试专用

    无聊期间 记录下 mysql 一次性插入上万条数据 测试的时候可以用 首先 创建一个表 t3 create table t3(id int)ENGINE = MyISAM; \d //    表示吧m ...

  10. rtx自定义面板不更新

    服务器和客户端自定义面的文件分别在下列xml中. 程序员的基础教程:菜鸟程序员