微信小程序开发之map地图组件定位并手动修改位置偏差-创新互联

环境搭建

公司主营业务：成都网站设计、网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出信宜免费做网站回馈大家。

注册，获取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
 }
})

网页标题：微信小程序开发之map地图组件定位并手动修改位置偏差-创新互联
URL分享：http://jkwzsj.com/article/diisdo.html