隨著網路越來越發達，地圖在這其中扮演著重要的角色，今天我們就來談談如何在小程式中使用地圖，首先我們看看效果圖：

說明一下，預設顯示第一張圖，然後點搜尋會跳轉到第二張圖片。下面進入正題：

JS檔案如下

const amapFile = require('../../utils/amap-wx.js'); //地圖檔案，在我的QQ群裡有下載（731568857）

Page({
  data: {
    key: '高德地圖KEY',
    show: false,
    currentLo: null,
    currentLa: null,
    newCurrentLo: null,
    newCurrentLa: null,
    distance: 0,
    duration: 0,
    markers: null,
    scale: 16,
    polyline: null,
    statusType: 'car',
    includePoints: []
  },
//預設載入資料
  onLoad: function() {
    var _this = this;
    wx.getLocation({
      success(res) {
        _this.setData({
          currentLo: res.longitude,
          currentLa: res.latitude,
          includePoints: [{
            longitude: res.longitude,
            latitude: res.latitude
          }],
          markers: [{
            id: 0,
            longitude: res.longitude,
            latitude: res.latitude,
            title: res.address,
            iconPath: '../../images/dw2.png',
            width: 20,
            height: 20
          }]
        });
      }
    })
  },

//獲取地址
  getAddress: function(e) {
    var _this = this;
    wx.chooseLocation({
      success(res) {
        var markers = _this.data.markers;
        markers.push({
          id: 0,
          longitude: res.longitude,
          latitude: res.latitude,
          title: res.address,
          iconPath: '../../src/images/navi_e.png',
          width: 32,
          height: 32
        });

        var points = _this.data.includePoints;
        points.push({
          longitude: res.longitude,
          latitude: res.latitude
        });
        _this.setData({
          newCurrentLo: res.longitude,
          newCurrentLa: res.latitude,
          includePoints: points,
          markers: markers,
          show: true
        });
        _this.getPolyline(_this.data.statusType);
      }
    });
  },
//繪製地圖
  drawPolyline(self, color) {
    return {
      origin: this.data.currentLo + ',' + this.data.currentLa,
      destination: this.data.newCurrentLo + ',' + this.data.newCurrentLa,
      success(data) {
        var points = [];
        if (data.paths && data.paths[0] && data.paths[0].steps) {
          var steps = data.paths[0].steps;
          for (var i = 0; i < steps.length; i++) {
            var poLen = steps[i].polyline.split(';');
            for (var j = 0; j < poLen.length; j++) {
              points.push({
                longitude: parseFloat(poLen[j].split(',')[0]),
                latitude: parseFloat(poLen[j].split(',')[1])
              })
            }
          }
        }
        self.setData({
          distance: data.paths[0].distance,
          duration: parseInt(data.paths[0].duration / 60),
          polyline: [{
            points: points,
            color: color,
            width: 6,
            arrowLine: true
          }]
        });
      }
    }
  },

//獲取定位
  getPolyline(_type) {
    var amap = new amapFile.AMapWX({ key: this.data.key });
    var self = this;
    switch (_type) {
      case 'car':
        amap.getDrivingRoute(this.drawPolyline(this, "#0091ff"));
        break;
      case 'walk':
        amap.getWalkingRoute(this.drawPolyline(this, "#1afa29"));
        break;
      case 'ride':
        amap.getRidingRoute(this.drawPolyline(this, "#1296db"));
        break;
      default:
        return false;
    }
  },
  goTo(e) {
    var _type = e.currentTarget.dataset.type;
    this.setData({ statusType: _type });
    this.getPolyline(_type);
  }
})
 

上面就是核心的JS檔案，下面是wxml檔案：

<view class="tui-map">
  <map id="map" longitude="{{currentLo}}" latitude="{{currentLa}}" scale="{{scale}}" markers="{{markers}}" polyline="{{polyline}}"  include-points="{{includePoints}}" show-location style="width: 100%; height: 100%;"></map>
</view>
<view class="tui-map-search" bindtap="getAddress">
   <icon size='20' type='search' class='tui-map-search-icon'></icon> 
  <input class="tui-map-input" placeholder="搜尋" focus="{{focusStatus}}"></input>
</view>
<view class="tui-search-bottom {{show ? '' : 'tui-hide'}}">
  <view class="page-group">
    <view class="page-nav-list {{statusType == 'car' ? 'active' : ''}}" data-type="car" bindtap="goTo">駕車</view>
    <view class="page-nav-list {{statusType == 'walk' ? 'active' : ''}}" data-type="walk" bindtap="goTo">步行</view>
    <view class="page-nav-list {{statusType == 'ride' ? 'active' : ''}}" data-type="ride" bindtap="goTo">騎行</view>
  </view>
  <view class="tui-warn">
    {{distance}}米
  </view>
  <view class="tui-warn">
    {{duration}}分鐘
  </view>
</view>
 

好了，大功告成，就是這麼簡單。才開始研究的時候感覺蠻難的，研究出來就不覺得了。有需要程式碼的朋友可以加我的QQ號或者微信公眾號，我們一起進步。

【本文由“xiaoyuehan007賬號”釋出，2018年11月15日】