微信小程序开发——map地图组件，定位，并手动修改位置偏差。 …

环境搭建注册，获取APPID（没有这个不能真鸡调试）下载微信web开发者工具（挺多bug，将就用）打开微信web开发者工具，扫码登录，新建小程序，输入APPID，勾选创建quick start项目。工 …

环境搭建

• 注册，获取APPID（没有这个不能真鸡调试）
• 下载微信web开发者工具（挺多bug，将就用）
• 打开微信web开发者工具，扫码登录，新建小程序，输入APPID，勾选创建quick start项目。

工程结构

可以看到工程根目录中有个app.js，这里可以定义全局变量，通过getApp()获取。 
项目中有了一些示例，已经有了获取用户信息的方法等。

开发地图定位，选择位置功能

我们直接修改index页面来做这个功能。

准备

• 新建imgs目录，加入2个图标（ic_location和ic_position），用于标记当前位置，和地图中央位置。

• 

  (此图片来源于网络，如有侵权，请联系删除! )

• 

  (此图片来源于网络，如有侵权，请联系删除! )

添加定位功能

修改app.js，加入定位功能，获取当前位置。

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  }
  ,getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  }
  //get locationInfo
  ,getLocationInfo: function(cb){
    var that = this;
    if(this.globalData.locationInfo){
        cb(this.globalData.locationInfo)
    }else{
        wx.getLocation({
          type: 'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
          success: function(res){
            that.globalData.locationInfo = res;
            cb(that.globalData.locationInfo)
          },
          fail: function() {
            // fail
          },
          complete: function() {
            // complete
          }
        })
    }
  }

  ,globalData:{
    userInfo:null
    ,locationInfo: null
  }
})

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