微信小程序获取当前位置 地图定位导航

小程序获取当前位置,回到当前位置,地图定位,导航

效果

因为小程序更新了获取地理位置API接口,需要先在app.json中配置一下permission字段 ,不然会报微信小程序getLocation 需要在app.json中声明permission字段

app.json:   (不知道具体位置可以看这里,这里有整个app.json的配置)

  1. 'permission': {
  2. 'scope.userLocation': {
  3. 'desc': '你的位置信息将用于小程序位置接口的效果展示'
  4. }
  5. }

wxml:

  1. <!--pages/map/map.wxml-->
  2. <!-- 这是地图部分 -->
  3. <view class='map_container'>
  4. <map class='map' longitude='{{longitude}}' latitude='{{latitude}}' scale='{{scale}}' markers='{{markers}}' controls='{{controls}}' bindcontroltap='bindcontroltap' polyline='{{polyline}}' circles='{{circles}}' bindmarkertap='bindmarkertap' bindcontroltap='bindcontroltap'
  5. show-location></map>
  6. </view>
  7. <!-- 以下是导航部分 -->
  8. <view class='list-guide'>
  9. <!-- 这里的坐标本应该是从服务器获取数据的,这时丈先写死在页面上了 -->
  10. <view bindtap='onGuideTap' data-latitude='39.92392' data-longitude='116.411885' data-bankName='最高人民检察院'>
  11. <image src='/images/banklist/daohang.png' class='list-guide-imgae'></image>
  12. <text class='list-guide-text'>导航</text>
  13. </view>
  14. <view bindtap='onbankTap' data-bankId='{{item.BANK_ID}}'>
  15. <image src='/images/banklist/xiangqing.png' class='list-guide-imgae'></image>
  16. <text class='list-guide-text'>详情</text>
  17. </view>
  18. </view>

宽度不是满屏,所以加个样式

wxss:

  1. /* pages/map/map.wxss */
  2. .map_container {
  3. height: 260px;
  4. width: 100%;
  5. }
  6. .map {
  7. height: 100%;
  8. width: 100%;
  9. }
  10. .list-guide{
  11. display: flex;
  12. flex-direction: row;
  13. justify-content:space-around;
  14. border-top: 1px solid #ededed;
  15. height: 80rpx;
  16. }
  17. .list-guide-imgae{
  18. height: 70rpx;
  19. width: 70rpx;
  20. margin-right: 20px;
  21. vertical-align: middle;
  22. }
  23. .list-guide-text{
  24. vertical-align: middle;
  25. line-height: 90rpx;
  26. font-size: 35rpx;
  27. }

下面就是最重要的JS部分了()

JS:

  1. // pages/map/map.js
  2. Page({
  3. /**
  4. * 页面的初始数据
  5. */
  6. data: {
  7. addmissage: '选的位置',
  8. // markers Array标记点
  9. stitle:'故宫',
  10. latitude: '',
  11. longitude: '',
  12. scale: 14,
  13. markers: [],
  14. //controls控件 是左下角圆圈小图标,用户无论放大多少,点这里可以立刻回到当前定位(控件（更新一下,即将废弃，建议使用 cover-view 代替）)
  15. controls: [{
  16. id: 1,
  17. iconPath: '../../images/img/controls.png',
  18. position: {
  19. left: 15,
  20. top: 260 - 50,
  21. width: 40,
  22. height: 40
  23. },
  24. clickable: true
  25. }],
  26. distanceArr: []
  27. },
  28. /**
  29. * 生命周期函数--监听页面加载
  30. */
  31. onLoad: function (options) {
  32. var that = this
  33. //获取当前的地理位置、速度
  34. wx.getLocation({
  35. type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
  36. success: function (res) {
  37. //赋值经纬度
  38. that.setData({
  39. latitude: res.latitude,
  40. longitude: res.longitude,
  41. })
  42. }
  43. })
  44. },
  45. //controls控件的点击事件
  46. bindcontroltap(e) {
  47. var that = this;
  48. if (e.controlId == 1) {
  49. that.setData({
  50. latitude: this.data.latitude,
  51. longitude: this.data.longitude,
  52. scale: 14,
  53. })
  54. }
  55. },
  56. //导航
  57. onGuideTap: function (event) {
  58. var lat = Number(event.currentTarget.dataset.latitude);
  59. var lon = Number(event.currentTarget.dataset.longitude);
  60. var bankName = event.currentTarget.dataset.bankname;
  61. console.log(lat);
  62. console.log(lon);
  63. wx.openLocation({
  64. type: 'gcj02',
  65. latitude: lat,
  66. longitude: lon,
  67. name: bankName,
  68. scale: 28
  69. })
  70. },
  71. })

项目下载在这里(只是地图部份,也有删减,非实际项目全部)

下面是我实际项目中的截图

赞 (0)

相关推荐