微信小程序开发(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: ''
  },
// 每次显示当前页面都要重新请求一次
onShow: function() {
    let that = this;
    // 获取定位,并把位置标示出来
    app.getLocationInfo(function(locationInfo) {
      that.setData({
        markers: [],
        longitude: locationInfo.longitude,
        latitude: locationInfo.latitude
      });
      app.showLoading('正在加载');
      let data = {
        'gisX': that.data.longitude,
        'gisY': that.data.latitude
      };
      that.loadData(data); // 加载周边设备信息
    }),
    // 动态设置map的宽和高
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          map_width: res.windowWidth,
          map_height: res.windowHeight - 44,
          controls: [{
            id: 0,
            iconPath: '/images/btn.png',
            position: {
              left: res.windowWidth * 0.5 - 80,
              top: res.windowHeight * 0.65,
              width: 161,
              height: 161
            },
            clickable: true
          }]
        })
      }
    });
  },

3.点击Marker显示详细信息并创建路线

在wxml中设置弹窗容器

<cover-view class="drawer_box" wx:if="{{showModalStatus}}" bindtap="powerDrawer" data-statu="close">
  <!--drawer content-->
  <cover-view class="drawer_title">
    <cover-image src='../../images/icon-xz.png' />
    <cover-view class="distance">{{cost}}分钟. 离目的地{{distance}}米</cover-view>
  </cover-view>
</cover-view>

<map>标签中也要有对应的bindmarkertap="markertap"属性,在js中设置markertap方法

markertap(e) {
    let that = this;
    let currentStatu = e.currentTarget.dataset.statu; // 当前弹窗open状态
    let marker = markersData.filter(function(marker) {
      return marker.id === e.markerId;
    });// 通过点击的marker的id在markerData中筛选出对应的信息
    this.util(currentStatu, marker[0]);
  },

创建路线要用到高德地图小程序SDK,这里产品只需要计算走路用时,所以设置了走路所用的时间

// 创建路线动画
  util: function(currentStatu, marker) {
    let that = this;
    
    //关闭弹窗
    if (currentStatu == "close") {
     that.setData({
       showModalStatus: false,
       polyline: []
     });
    }

    // 显示弹窗
    if (currentStatu == "open") {
      let markerLongitude = marker.gisX;
      let markerLatitude = marker.gisY;
      app.getLocationInfo(function(locationInfo) { // 调用app中的接口获取当前位置信息
        // 高德地图key
        let amapFun = new amapFile.AMapWX({
          key: amapKey
        });
        amapFun.getWalkingRoute({
          origin: locationInfo.longitude + ',' + locationInfo.latitude, // 出发点,lon,lat
          destination: markerLongitude + ',' + markerLatitude, // 目的地
          success: function(data) {
            let points = [];
            if (data.paths && data.paths[0] && data.paths[0].steps) {
              let steps = data.paths[0].steps;
              for (let i = 0; i < steps.length; i++) {
                let poLen = steps[i].polyline.split(';');
                for (let j = 0; j < poLen.length; j++) {
                  points.push({
                    longitude: parseFloat(poLen[j].split(',')[0]),
                    latitude: parseFloat(poLen[j].split(',')[1])
                  })
                }
              }
            }
            that.setData({
              showModalStatus: true,
              polyline: [{
                points: points,
                color: "#5aad80",
                width: 5
              }]
            });
            if (data.paths[0] && data.paths[0].distance) {
              that.setData({
                distance: data.paths[0].distance
              });
            }
            if (data.paths[0] && data.paths[0].duration) {
              that.setData({
                cost: parseInt(data.paths[0].duration / 60) // 分钟
              });
            }

          },
          fail: function(info) {
            console.log(info);
          }
        });
      });
    }
  },

 4.将地图中心点移到当前位置

由于地图是可以拖动的,当地图中心点偏离当前位置的时候,可以设置按钮,使当前位置为地图中心点,使用mapCtx时要先创建

onReady: function(e) {
    // 使用 wx.createMapContext 获取 map 上下文
    this.mapCtx = wx.createMapContext('map')
  },
 // 将地图中心移动到当前位置
  moveToLocation: function() {
    this.mapCtx.moveToLocation()
  },

5.滑动地图,动态获取地图中心点位置

这个功能找了很多方法,都没有实现想要的效果,如果使用this.setData({marker})的方式会实现闪屏现象,而且各种bug,所以固定标记地图中心点的方式,只有在wxml中使用<cover-view>标签包裹中心点图标来实现。要在<map>中设置bindregionchange="regionchange"属性

// 地图发生变化的时候,获取中间点,也就是用户选择的位置
  regionchange(e) {
    // 会有两次,一次start,一次end,一般情况下在移动结束后进行数据请求
    if (e.type == 'end') {
      app.showLoading('正在搜索');
      this.getLngLat();
    }
  },
  // 获取中间点的经纬度,并mark出来
  getLngLat: function() {
    var that = this;
    that.mapCtx = wx.createMapContext("map"); // 如果有初始化mapCtx,这里可以省略
    that.mapCtx.getCenterLocation({
      success: function(res) {
        let curLatitude = res.latitude;
        let curLongitude = res.longitude;
        // 通过获取的经纬度进行请求数据
        let data = {
          'gisX': curLongitude,
          'gisY': curLatitude
        };
        that.loadData(data);
      }
    })
  },

最后实现的效果图

6.各大小程序地图SDK功能对比

 路线规划功能高德小程序地图SDK可以规划步行、公交、驾车路线,还可以计算路线距离和时间

小程序地图SDK 高德地图 百度地图 腾讯地图
相同功能

获取POI数据

获取地址描述数据(逆地址编码)

获取输入提示词(热词联想)

POI检索

POI检索热词联想

逆地址解析

地点搜索

关键词输入提示

逆地址解析(坐标位置描述)

不同功能

获取实时天气数据

路线规划

绘制静态图

天气查询

地址解析(地址转坐标)

距离计算

路线规划

获取城市列表

获取城市区县

腾讯地图小程序SDK使用时,设置要开启webserviceAPI。

展开阅读全文

没有更多推荐了,返回首页