博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序,前端大梦想(六)
阅读量:7043 次
发布时间:2019-06-28

本文共 975 字,大约阅读时间需要 3 分钟。

 

微信小程序之联合百度API实现定位

 

    定位功能对于我们都不陌生,在移动端的应用中更是不可或缺的功能,小程序中也提供了对应的API帮助我们完成定位的实现,但是目前小程序的定位API只能返回经纬度,所以要获取更加完整的地理信息需要其它数据接口的帮助,这里我们使用百度地图API

  • 小程序位置API介绍
  • 百度地图API返回地理信息

 

一、 获取位置

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

     object参数说明:

      success返回参数说明: 

    示例代码:

 

wx.getLocation({

 

  type: 'wgs84',

 

  success: function(res) {

 

    var latitude = res.latitude

 

    var longitude = res.longitude

 

    var speed = res.speed

 

    var accuracy = res.accuracy

 

  }

 

})

 

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

 

    示例代码:

 

   效果图:

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

     OBJECT参数说明:

   示例代码:

    效果图:

  • wx.createMapContext(mapId)地图组件控制

   创建并返回 map 上下文 mapContext 对象

    mapContext:

    mapContext 通过 mapId 跟一个 <map/> 组件绑定,通过它可以操作对应的 <map/> 组件。方法列表如下:

    注意: covers 属性即将移除,请使用 markers 替代

  • markers标记点用于在地图上显示标记的位置

  •  controls

   在地图上显示控件,控件不随着地图移动

     position

 

   示例代码

    效果图:

    二、 通过百度api获取地理信息

  1. 首先注册百度地图API,获取key
  2. 使用数据接口

     https://api.map.baidu.com/geocoder/v2/?ak=7VENmCeC4aaAfx3CKbSjT1K3oRucOgDK&location=' +locationParam + '1&output=json&pois=1

    示例代码:

 

转载地址:http://wqqal.baihongyu.com/

你可能感兴趣的文章
Event Loop是个什么玩意:从 Vue 的 nextTick 说起
查看>>
前PS VR伦敦团队另立门户,创立新的VR工作室
查看>>
jSearch(聚搜) v0.5.0 发布,多项更新和体验优化
查看>>
日志收集(ElasticSearch)串联查询 MDC
查看>>
5.For loops
查看>>
抛砖引玉之~sftp
查看>>
linux mysql 操作命令
查看>>
[20180126]内核参数tcp_keepalive.txt
查看>>
Leetcode打卡 | No.016 最接近的三数之和
查看>>
9.数据库服务器部署之------3步实现远程访问
查看>>
Nginx服务器开箱体验
查看>>
华虹宏力探索智能制造 亚信安全洞察全网风险
查看>>
在PyODPS DataFrame自定义函数中使用pandas、scipy和scikit-learn
查看>>
无人机为何“一夜爆红”?开源飞控在其后助力
查看>>
LG有意进军自动驾驶领域, 或开发基于3D摄像头的安全驾驶辅助系统
查看>>
Android项目实战(十九):Android Studio 优秀插件: Parcelable Code Generator
查看>>
Linux启动/停止/重启Mysql数据库的方法
查看>>
Ubuntu 16.04安装SQLite Browser操作SQLite数据库
查看>>
能源区块链:无法被收买的数字账本,有望破解新能源骗补难题
查看>>
国内的服务机器人还缺点啥?
查看>>