小程式如何使用地圖
阿新 • • 發佈:2018-11-27
隨著網路越來越發達,地圖在這其中扮演著重要的角色,今天我們就來談談如何在小程式中使用地圖,首先我們看看效果圖:
說明一下,預設顯示第一張圖,然後點搜尋會跳轉到第二張圖片。下面進入正題:
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日】