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

 更新时间:2019年08月17日 09:25:08   作者:贝爷粉丝团  
这篇文章主要介绍了微信小程序开发之map地图组件,定位,并手动修改位置偏差,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

环境搭建

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

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

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

工程结构

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

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

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

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

准备

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

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

地图控件布局

修改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啦,用户可以看到自己的定位,如果觉得有偏差,可以移动地图,把中央点放到自己认为的准确位置上。

这里写图片描述
这里写图片描述
这里写图片描述

相关文章

  • Bootstrap实现前端登录页面带验证码功能完整示例

    Bootstrap实现前端登录页面带验证码功能完整示例

    这篇文章主要介绍了Bootstrap实现前端登录页面带验证码功能,结合完整实例形式分析了Bootstrap前端登录页面带验证码界面布局与功能实现相关操作技巧,需要的朋友可以参考下
    2020-03-03
  • js隐藏与显示回到顶部按钮及window.onscroll事件应用

    js隐藏与显示回到顶部按钮及window.onscroll事件应用

    现在大多数网站都会添加这种功能:当滚动条滚动到页面的下方时,页面的右下角会显示出来一个“回到顶部”的按钮或连接;那么,如何控制“回到顶部”按钮的显示或隐藏呢;本文介绍详细实现方法,感兴趣的你可不要走开哦
    2013-01-01
  • js弹出确认是否删除对话框

    js弹出确认是否删除对话框

    这篇文章主要介绍了js弹出确认是否删除对话框,具体实现代码如下,需要的朋友可以参考下
    2014-03-03
  • JS实现漂亮的淡蓝色滑动门效果代码

    JS实现漂亮的淡蓝色滑动门效果代码

    这篇文章主要介绍了JS实现漂亮的淡蓝色滑动门效果代码,涉及JavaScript通过自定义函数遍历页面元素及动态设置元素属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • js 阻止子元素响应父元素的onmouseout事件具体实现

    js 阻止子元素响应父元素的onmouseout事件具体实现

    本文为大家介绍下js阻止子元素响应父元素的onmouseout事件,具体实现如下,感兴趣的朋友可以参考下
    2013-12-12
  • JS实现简单的图书馆享元模式实例

    JS实现简单的图书馆享元模式实例

    这篇文章主要介绍了JS实现简单的图书馆享元模式,以一个图书馆存书借书的例子分析了图书馆享元模式的实现技巧,需要的朋友可以参考下
    2015-06-06
  • JavaScript函数柯里化详解

    JavaScript函数柯里化详解

    柯里化函数主要起到预处理的作用。接下来通过本文给大家介绍JavaScript函数柯里化有什么作用及实现bind方法,非常具有参考价值特此分享供大家学习
    2016-04-04
  • JS Web Flex弹性盒子模型代码实例

    JS Web Flex弹性盒子模型代码实例

    这篇文章主要介绍了JS Web Flex弹性盒子模型代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • Three.js实现浏览器变动时进行自适应的方法

    Three.js实现浏览器变动时进行自适应的方法

    这篇文章主要给大家介绍了关于Three.js实现浏览器变动时进行自适应的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-09-09
  • 微信小程序tabBar 返回tabBar不刷新页面

    微信小程序tabBar 返回tabBar不刷新页面

    这篇文章主要介绍了微信小程序tabBar 返回tabBar不刷新页面,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07

最新评论