码迷,mamicode.com
首页 > 微信 > 详细

小程序4-地图定位3

时间:2020-07-09 01:22:48      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:功能   control   文件中   loading   http   center   封装   点击   一点   

  上一次已经能正常显示地图,并定位到当前用户所在位置。如果用户滑动地图,那么地图的中心点就不是当前位置了,如果滑动的距离远,再手动回到当前位置是非常麻烦的。  

  接下来我们添加一个功能,在地图的左下角添加一个‘center’图标,点击这个图标,地图中心点就回到当前位置。效果如下图所示:

   技术图片

   左下角那个黑色的圆圈,就是center.png图标。

  思路其实很简单,有了做地图中心图标的经验,这个无非也就是再弄格图片,定位到左下角位置,然后给他设置点击事件就完事了。接下来说下实现的步骤。

  1.把center.png图片导入到项目的resources目录下。

  2.把此图标加入到map组件的controls属性的集合中,先来修改页面的.js文件代码,代码如下:  

  data: {
    longitude: ‘‘, //经度
    latitude: ‘‘,   //维度 
    controls: [{
      id: 1,
      iconPath: ‘/resources/pin.png‘,
      position: {
        left: app.globalData.windowWidth / 2 - 15,
        top: (app.globalData.windowHeight - 40) /2 - 40,
        width: 30,
        height: 40,
      }
    },
    {
      id: 2,
      iconPath: ‘/resources/center.png‘,
      position: {
        left: 20,
        top: app.globalData.windowHeight - 100,
        width: 40,
        height: 40,
      },
      clickable: true
    }]
  },  

  这里的代码跟之前的pin.png没什么大的区别,唯一区别就是它是可以点击的,所以需要设置clickable : true

  3.在页面的.wxml中设置此图标的点击事件。代码如下:

  <map longitude="{{longitude}}" latitude="{{latitude}}" id="map" class="map" show-location="true" scale="17"
   controls="{{controls}}" bindcontroltap="centerTap"></map>

  关键点就是属性 bindcontroltap,给它的值是点击的响应函数名,当然你可以根据自己的需要命名,这里声明的函数名是centerTap。

  4.再回到页面的.js文件中。由于我们希望的效果是点击这个center图标,能让地图中心点回到当前位置,所以这时候要调用微信提供的api。这个api又需要先获取到地图的上下文对象,所以我们需要找一个合适的时机来获取地图上下文对象(mapContext)。这个时机就是页面的生命周期函数onReady。代码如下:

onReady(){
    this.mapCtx = wx.createMapContext(‘map‘)
  }

  接下来,我们只需要在centerTap这个点击响应函数中,通过mapCtx这个地图上下文对象,来调用api,让地图中心点回到当前位置就可以了。

  centerTap(e){
    // console.log(e);
    if(e.controlId == 2){ //点击的是center.png图标
      this.mapCtx.moveToLocation();
    }
  },  

   这里要说明的一点是,这个方法有个参数e,它其实就相当于js里的事件对象,封装了一些有关事件的重要参数。比如通过e.controlId就能拿到被点击的control对象的id。这一点很有用,当你地图上有多个control图标的时候,通过这个可以来区分用户点击的是哪一个。

  至此搞定。

小程序4-地图定位3

标签:功能   control   文件中   loading   http   center   封装   点击   一点   

原文地址:https://www.cnblogs.com/ldq678/p/13269938.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!