小程序模板网

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

发布时间:2017-11-28 16:59 所属栏目:小程序开发教程

环境搭建注册,获取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
  }
})


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/17969.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询