微信小程序开发之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 相关文章推荐
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
微信小程序移动拖拽视图-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查询搜索引擎排名位置的代码
2010/01/05 PHP
php中session退出登陆问题
2014/02/27 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
PHP重载基础知识回顾
2020/09/10 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
浅谈Javascript中的Function与Object
2015/01/26 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
js实现聊天对话框
2020/02/08 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
Python字典,函数,全局变量代码解析
2017/12/18 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
python画图的函数用法以及技巧
2019/06/28 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
python实现贪吃蛇双人大战
2020/04/18 Python
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
班长自荐书范文
2014/02/11 职场文书
学生请假条
2014/04/11 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
幼儿园见习总结
2015/06/23 职场文书
运动会运动员赞词
2015/07/22 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS