微信小程序map组件

记录一下在使用map组件的时候所遇到的问题
在map组件这块，我主要要实现的功能有
（1）获取当前位置，并标记
（2）点击回到当前位置为中心
（3）搜索目的位置
（4）匹配停车位并显示在地图上

1.map组件的使用

(https://developers.weixin.qq.com/miniprogram/dev/component/map.html)
参考官方文档基本就能实现
最主要的几个参数有：latitude，longitude地图中心的经纬度，scale 缩放级别 ，markers 标记点，show-Location 是否显示当前定位。

		<map id="myMap" latitude="{{latitude}}" longitude="{{longitude}}" scale="20" markers="{{markers}}" show-location
			enable-3D="true" style="width: 100%; height:600px;">
		</map>

里面的latitude和longitude我都是获取的当前定位

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    that.requestLocation();
  },
requestLocation: function () {
    var that = this;
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude,
        })
        that.moveTolocation();
      },
    })
  },

2.定位精确性问题

map组件中的show-location方法获取的定位点和，getLocation方法所获取的定位点不一致。
在map组件中有一个show-location属性，设置为true，就会显示一个绿色的当前位置的点。
使用getLocation获取当前位置，在markers中标记之后也可以获取当前位置的点
但是一开始两个点不一致。

后来查询之后发现是两个方法所用的坐标系不一致，将getLocation中的type设置为国测局坐标// GPS坐标系 // type:'wgs84', // 国测局火星坐标系 type:'gcj02',之后坐标变为一致

3.点击标签回到当前位置为中心

页面展示标签官方说是可以用cover-view，但调试时有说现在可以同层渲染了，支持用view。也就是说可以直接使用view作为页面上的标签。

<view bindtap="clearInput">

		<map id="myMap" latitude="{{latitude}}" longitude="{{longitude}}" scale="20" markers="{{markers}}" show-location
			enable-3D="true" style="width: 100%; height:600px;">
		</map>
		<view class='cover-layout2'bindtap='selfLocationClick'>
			<image class='listShow' src='../../images/parkingList/list.png'></image>
		</view>
	</view>

核心方法

 //调整重心位置和缩放级别
  selfLocationClick: function () {
    var that = this;
    //还原默认缩放级别
    that.setData({
      scale: defaultScale
    })
    //必须请求定位，改变中心点坐标
    that.requestLocation();
  },
  //请求地理位置
  requestLocation: function () {
    var that = this;
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude,
        })
        that.moveTolocation();
      },
    })
  },
  /**
   * 移动到中心点(核心的方法）
   */
  moveTolocation: function () {
    var mapCtx = wx.createMapContext(mapId);
    mapCtx.moveToLocation();
  },

4.搜索提示

主要实现在搜索框搜索，提示搜索内容并返回搜索目的地的坐标。用到了腾讯位置服务的方法

 /**
   * 
   *搜索框输入事件的绑定，
   1.获取搜索的提示
   2.获取目的地数据
   suggestion数组中存放搜索的列表，inputVal中是最终选中的结果。
   */
  inputTyping: function (e) {
    qqmapsdk = new QQMapWX({
      key: ''
    });
    var that = this;
    qqmapsdk.getSuggestion({
      keyword: e.detail.value,
      success: function (res) {
        console.log(res);
        var sug = [];
        for (var i = 0; i < res.data.length; i++) {
          sug.push({ // 获取返回结果，放到sug数组中
            title: res.data[i].title,
            id: res.data[i].id,
            addr: res.data[i].address,
            city: res.data[i].city,
            district: res.data[i].district,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng
          });
        }
        that.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
          suggestion: sug,
          showSuggestion: true
        });

      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }

    });

  },
  //选中推荐项
  backfill: function (e) {
    var id = e.currentTarget.id;
    for (var i = 0; i < this.data.suggestion.length; i++) {
      var tem = [];
      if (i == id) {
        tem.push({ // 获取返回结果，放到sug数组中
          title: this.data.suggestion[i].title,
          id: this.data.suggestion[i].id,
          addr: this.data.suggestion[i].address,
          city: this.data.suggestion[i].city,
          district: this.data.suggestion[i].district,
          latitude: this.data.suggestion[i].latitude,
          longitude: this.data.suggestion[i].longitude
        });

        console.log(this.data.suggestion[i]);
        this.setData({
          inputVal: this.data.suggestion[i].title,
          inputDetile: tem

        });
        console.log(this.data.inputDetile)
      }
    }
  },

5.搜索结果的展示

这个功能只是实现了简单的展示，对于搜索的结果并没有过滤处理。