微信小程序开发(2)——地图定位、地图滑动、创建路线等

1.地图的使用

在wxml文件中使用地图，动态设置中心点位置和地图大小等信息。

<map id="map" 
  longitude="{
  {longitude}}" 
  latitude="{
  {latitude}}" 
  scale="14" 
  controls="{
  {controls}}" 
  markers="{
  {markers}}" 
  polyline="{
  {polyline}}" 
  bindcontroltap="controltap" 
  bindmarkertap="markertap" 
  bindregionchange="regionchange" 
  show-location 
  style="width: {
  {map_width}}px; height: {
  {map_height}}px;"
  data-statu="open">
  </map>

2.地图定位和设置地图大小

可以使用小程序的定位接口实现当前位，在app.js中进行封装获取当前位置的方法，要在<map>中设置show-location属性。

/**
   *@param {function} cb 处理地理位置
   */
  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(res) {
          console.log(res);
        }
      })
    }
  },

 调用，onShow每次显示页面时调用一次，动态设置地图大小，获取当前位置信息并且查询当前位置周边设备信息。

data: {
    showModalStatus: false, // 弹窗
    map_width: 0,
    map_height: 0,
    longitude: 0, // 经度
    latitude: 0, //纬度
    markers: [],
    polyline: [],
    distance: 0,  // 距离
    cost: 0,  // 花费时长
    clearShow: false,
    searchContent: '