共享单车微信小程序之初体验

本文的学习内容来自小牛课堂，微信小程序的学习地址：https://www.nowcoder.com/study/vod/204/2/2
微信小程序开发官方帮助文档：https://developers.weixin.qq.com/miniprogram/dev/component/map.html
注：为了书写的方便快捷，每个功能点只记录了它的关键之处，并不完整

从Sensor里面读取经纬度，显示对应的地理位置信息

//index.wxml
//相关属性：latitude（纬度），longitude（经度）
<map id='mymap' latitude='{{lat}}' longitude='{{log}}' style='width:100%;height:100%'
>
</map>

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    lat:0,
    log:0
  },
  //首次加载页面时调用
  onLoad: function () {
    var that = this;
    //获取当前位置的地理信息
    wx.getLocation({
      success: function(res) {
        var longitude = res.longitude;
        var latitude = res.latitude;
        that.setData({
           log : longitude,
           lat: latitude
        })
      }
    })
  }
})

2.在地图内添加控件

//index.wxml
//相关属性：controls
<map id='mymap' latitude='{{lat}}' longitude='{{log}}' style='width:100%;height:100%'
controls='{{controls}}'
>
</map>

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    log:0,
    lat:0,
    controls: []
  },
  //首次加载页面时调用
  onLoad: function () {
    var that = this;
    //获得系统信息
    wx.getSystemInfo({
      success: function(res) {
        var windowWidth = res.windowWidth;
        var windowHeight = res.windowHeight;
        console.log(windowWidth)
        that.setData({
          controls: [
            //扫码按钮
            {
              id: 1,
              iconPath: '/images/qrcode.png',
              position: { 
                width: 100,
                height: 60,
                left: windowWidth / 2 - 50,
                top: windowHeight - 90
              },
              clickable: true 
            }
          ]
        })
      }
    })
  }
})

3.点击回到地图原来的位置

//属性：bindcontroltap='controltap'
//index.wxml
<map id='myMap' latitude='{{lat}}' longitude='{{log}}' style='width:100%;height:100%' show-location='true' scale='17'
bindcontroltap='controltap'
controls='{{controls}}'
>
</map>

//index.js
controltap: function(e) {
    var cid = e.controlId;
    switch(cid) {
      case 7: {
        //回到原来的位置，mapCtx记录了地图移动前的初始位置
        this.mapCtx.moveToLocation();
      }
    }
  },
//页面渲染完成就会执行
onReady: function() {
    //创建map上下文
    this.mapCtx = wx.createMapContext('myMap')
}

wx.createMapContext用法：https://developers.weixin.qq.com/miniprogram/dev/api/api-map.html#wxcreatemapcontextmapid

共享单车微信小程序之初体验

猜你喜欢