微信小程序开发之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地图组件定位并手动修改位置偏差-创新互联
网站地址:http://scyanting.com/article/diisdo.html