小程序4-地图定位3

Posted 2020-12-16 天天向上吧

　　上一次已经能正常显示地图，并定位到当前用户所在位置。这一次我们要实现的任务是在地图的中心添加一个pin图标，表示这是地图的中心；然后在地图的左下角添加一个center图标，点击此图标，能让地图中心立刻返回用户当前所在地。

　　这两个标记位置是固定的，不管用户如何拖拽地图，这2个图标位置都不会改变。所以这里我们使用了controls这个小程序map组件的属性来实现，虽然这个属性已经不推荐使用了，但是仍然可以用的。实现效果如下：

　　

　　一、添加地图中心图标pin

　　这个图标的作用就是个用户一个参照中心。通过做这个，我们可以学习如何在map上加一些位置固定的元素。

　　1.把pin.png图片导入到resources目录下。

　　2.在.wxml文件中，找到<map>标签，给它添加controls属性。代码如下：

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

　　3.打开页面的.js文件，配置controls的值。　　

  data: {
    longitude: \'\', //经度
    latitude: \'\',   //维度 
    controls: [{
      id: 1,
      iconPath: \'/resources/pin.png\',
      position: {
        left: 0,
        top: 0,
        width: 30,
        height: 40,
      }
    }]
　}

　　需要注意的是，controls属性的值是一个数组，哪怕只有一个元素。数组里的每一项必须是一个对象，如果想在地图上插入多个图标，那么每1个图标对应一个对象。这个对象的成员属性是微信小程序定义死的，按官方文档来写就行了。id不能重复，left和top是用来给图标定位的，width和height是图标显示大小。我们这里给的left值和top值是0，此时pin图标是显示在地图左上角(0,0)位置的。这显然是不行的，我们要的是定位到地图的中心，所以，我们就必须拿到当前地图的尺寸。

　　4.获取当前地图的尺寸（当前小程序窗口尺寸）

　　当前地图的尺寸跟小程序的窗口尺寸是紧密关联的，这个自不必多说。那我们就来看看如何获取当前小程序窗口宽度和高度。

　　获取窗口的宽度，微信小程序的api已经封装好了，我们直接调用就可以。这里有个问题就是在哪里调用获取窗口大小。

　　由于我们可能在多处调用该数据，所以我们选择，在app刚一加载的时候就获取该数据，然后把它存放到globalData中，这样在整个小程序中就都可以访问了。

　　打开app.js文件

App({
  globalData:{

  },
  onLaunch: function () {
    try{
      const res = wx.getSystemInfoSync();
      this.globalData.windowWidth = res.windowWidth;
      this.globalData.windowHeight = res.windowHeight;
      // console.log(this.globalData);
    }catch(e){

    }
  }
})

　　接下来，我们回到页面的.js文件，先获取小app的实例　　

const app = getApp();

　　然后修改刚才controls里添加的那个对象的left值和top值　　

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,
      }
    }]
  },  

　　搞定！

　　二、添加地图左下角的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图标的时候，通过这个可以来区分用户点击的是哪一个。

　　至此搞定。