欢迎光临,了解微信小程序开发,就上易用通!

微信小程序位置API

发布:2018-04-20 11:00浏览: 来源:网络 作者:cola

作者:BloodyMandoo    原文:https://blog.csdn.net/bloodymandoo/article/details/72885460

1、获取位置

wx.getLocation(OBJECT) 
获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用;当用户点击“显示在聊天顶部”时,此接口可继续调用。

 

				
  1. [javascript] view plain copy
  2. var that=this;
  3. wx.getLocation({
  4. type: 'wgs84',
  5. success: function (res) {
  6. var latitude = res.latitude
  7. var longitude = res.longitude
  8. var speed = res.speed
  9. var accuracy = res.accuracy
  10. var altitude = res.altitude
  11. var verticalAccuracy = res.verticalAccuracy
  12. var horizontalAccuracy = res.horizontalAccuracy
  13. that.setData({
  14. longitude: longitude,
  15. latitude: latitude,
  16. speed: speed,
  17. accuracy: accuracy,
  18. altitude: altitude,
  19. verticalAccuracy: verticalAccuracy,
  20. horizontalAccuracy: horizontalAccuracy
  21. })
  22. }
  23. })

微信小程序位置API(图1)

wx.chooseLocation(OBJECT)  打开地图选择位置

微信小程序位置API(图2)

 

2、查看位置

wx.openLocation(OBJECT)  ​ 使用微信内置地图查看位置

微信小程序位置API(图2)

微信小程序位置API(图4)

 

  1. wx.getLocation({
  2. type: 'gcj02', //返回可以用于wx.openLocation的经纬度
  3. success: function(res) {
  4. var latitude = res.latitude
  5. var longitude = res.longitude
  6. wx.openLocation({
  7. latitude: latitude,
  8. longitude: longitude,
  9. scale: 28
  10. })
  11. }
  12. })
 

3、地图组件控制

wx.createMapContext(mapId)  创建并返回 map 上下文 mapContext 对象  mapContext  mapContext 通过 mapId 跟一个 组件绑定,通过它可以操作对应的 组件。  mapContext 对象的方法列表

方法 参数 说明 最低版本  getCenterLocation OBJECT 获取当前地图中心的经纬度,返回的是 gcj02 坐标系,可以用于 wx.openLocation  moveToLocation 无 将地图中心移动到当前定位点,需要配合map组件的show-location使用  translateMarker OBJECT 平移marker,带动画 1.2.0  includePoints OBJECT 缩放视野展示所有经纬度 1.2.0  getCenterLocation 的 OBJECT 参数列表

参数 类型 必填 说明  success Function 否 接口调用成功的回调函数 ,res = { longitude: "经度", latitude: "纬度"}  fail Function 否 接口调用失败的回调函数  complete Function 否 接口调用结束的回调函数(调用成功、失败都会执行)  translateMarker 的 OBJECT 参数列表

参数 类型 必填 说明  markerId Number 是 指定marker  destination Object 是 指定marker移动到的目标点  autoRotate Boolean 是 移动过程中是否自动旋转marker  duration Number 否 动画持续时长,默认值1000ms,平移与旋转分别计算  animationEnd Function 否 动画结束回调函数  includePoints 的 OBJECT 参数列表

参数 类型 必填 说明  points Array 是 要显示在可视区域内的坐标点列表,[{latitude, longitude}]  padding Array 否 坐标点形成的矩形边缘到地图边缘的距离,单位像素。格式为[上,右,下,左],安卓上只能识别数组第一项,上下左右的padding一致。开发者工具暂不支持padding参数。

微信小程序位置API(图5)

 

  1. <!-- map.wxml -->
  2. <map id="myMap" show-location />
  3.  
  4. <button type="primary" bindtap="getCenterLocation">获取位置</button>
  5. <button type="primary" bindtap="moveToLocation">移动位置</button>
  6. <button type="primary" bindtap="translateMarker">移动标注</button>
  7. <button type="primary" bindtap="includePoints">缩放视野展示所有经纬度</button>
 

  1. // map.js
  2. Page({
  3. onReady: function (e) {
  4. // 使用 wx.createMapContext 获取 map 上下文
  5. this.mapCtx = wx.createMapContext('myMap')
  6. },
  7. getCenterLocation: function () {
  8. this.mapCtx.getCenterLocation({
  9. success: function(res){
  10. console.log(res.longitude)
  11. console.log(res.latitude)
  12. }
  13. })
  14. },
  15. moveToLocation: function () {
  16. this.mapCtx.moveToLocation()
  17. },
  18. translateMarker: function() {
  19. this.mapCtx.translateMarker({
  20. markerId: 0,
  21. autoRotate: true,
  22. duration: 1000,
  23. destination: {
  24. latitude:23.10229,
  25. longitude:113.3345211,
  26. },
  27. animationEnd() {
  28. console.log('animation end')
  29. }
  30. })
  31. },
  32. includePoints: function() {
  33. this.mapCtx.includePoints({
  34. padding: [10],
  35. points: [{
  36. latitude:23.10229,
  37. longitude:113.3345211,
  38. }, {
  39. latitude:23.00229,
  40. longitude:113.3345211,
  41. }]
  42. })
  43. }
  44. })





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。