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


Posted in Javascript onAugust 17, 2019

环境搭建

注册,获取APPID(没有这个不能真鸡调试)

下载微信web开发者工具(挺多bug,将就用)

打开微信web开发者工具,扫码登录,新建小程序,输入APPID,勾选创建quick start项目。

工程结构

可以看到工程根目录中有个app.js,这里可以定义全局变量,通过getApp()获取。

项目中有了一些示例,已经有了获取用户信息的方法等。

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

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

准备

新建imgs目录,加入2个图标(ic_location和ic_position),用于标记当前位置,和地图中央位置。

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

添加定位功能

修改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
 }
})

地图控件布局

修改pages/index/index.wxml文件,添加map标签,如下

<map id="map4select"
 longitude="{{longitude}}" latitude="{{latitude}}" 
 markers="{{markers}}"
 scale="20" 
 style="width:{{map_width}}px;height:{{map_height}}px"
 bindregionchange="regionchange"
 controls="{{controls}}">
</map>

需要给地图指定一个id,后面可以通过id获取地图的上下文。

监听bindregionchange事件,地图变化的时候可以监听到。

地图的大小不要写死,动态设置,我这里打算设置为宽高都是屏幕宽度。

controls是固定在map组件上面的。一开始我想用image替代,但是设置z-index也不能在地图上面,毕竟不是H5开发。

逻辑代码编写

编辑index.js

var app = getApp()

Page({
  data:{
   map_width: 380
   ,map_height: 380
  }
  //show current position
  ,onLoad: function(){
  var that = this;
  // 获取定位,并把位置标示出来
  app.getLocationInfo(function(locationInfo){
    console.log('map',locationInfo);
    that.setData({
     longitude: locationInfo.longitude
     ,latitude: locationInfo.latitude
     ,markers:[
      {
      id: 0
      ,iconPath: "../../imgs/ic_position.png"
      ,longitude: locationInfo.longitude
      ,latitude: locationInfo.latitude
      ,width: 30
      ,height: 30
      }
     ]
    })
  })

  //set the width and height
  // 动态设置map的宽和高
  wx.getSystemInfo({
   success: function(res) {
    console.log('getSystemInfo');
    console.log(res.windowWidth);
    that.setData({
      map_width: res.windowWidth
     ,map_height: res.windowWidth
     ,controls: [{
      id: 1,
      iconPath: '../../imgs/ic_location.png',
      position: {
       left: res.windowWidth/2 - 8,
       top: res.windowWidth/2 - 16,
       width: 30,
       height: 30
      },
      clickable: true
     }]
    })
   }
  })

 }
 //获取中间点的经纬度,并mark出来
 ,getLngLat: function(){
   var that = this;
   this.mapCtx = wx.createMapContext("map4select");
   this.mapCtx.getCenterLocation({
    success: function(res){

      that.setData({
      longitude: res.longitude
      ,latitude: res.latitude
      ,markers:[
       {
       id: 0
       ,iconPath: "../../imgs/ic_position.png"
       ,longitude: res.longitude
       ,latitude: res.latitude
       ,width: 30
       ,height: 30
       }
      ]
     })

    }
   })
 }
 ,regionchange(e) {
  // 地图发生变化的时候,获取中间点,也就是用户选择的位置
   if(e.type == 'end'){
     this.getLngLat()
   }
 }
 ,markertap(e) {
  console.log(e)
 }
})

展示

这样,就OK啦,用户可以看到自己的定位,如果觉得有偏差,可以移动地图,把中央点放到自己认为的准确位置上。

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

Javascript 相关文章推荐
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
PHP PDO操作总结
Nov 17 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
angular2中Http请求原理与用法详解
Jan 11 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 #Javascript
微信小程序框架的页面布局代码
Aug 17 #Javascript
vue实现滑动到底部加载更多效果
Oct 27 #Javascript
vue实现页面滚动到底部刷新
Aug 16 #Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 #Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 #Javascript
jquery树形插件zTree高级使用详解
Aug 16 #jQuery
You might like
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
PHP 快速排序算法详解
2014/11/10 PHP
PHP导入导出Excel代码
2015/07/07 PHP
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
python使用Berkeley DB数据库实例
2014/09/26 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
如何在python中使用selenium的示例
2017/12/26 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
html5 标签
2009/07/16 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
银行柜员应聘推荐信范文
2013/11/24 职场文书
实习推荐信
2014/05/10 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
订货会主持词
2015/07/01 职场文书
2016教师节感恩话语
2015/12/09 职场文书
Python预测分词的实现
2021/06/18 Python
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL