微信小程序根據(jù)經(jīng)緯度規(guī)劃路線
2020-09-27|HiShop
導(dǎo)讀:微信小程序可以通過API獲取當(dāng)前位置的經(jīng)緯度,那么如果根據(jù)經(jīng)緯度規(guī)劃路線怎么做。...
微信小程序可以通過API獲取當(dāng)前位置的經(jīng)緯度,那么如果根據(jù)經(jīng)緯度規(guī)劃路線怎么做。
效果圖:
1、wxml文件
<view class="mapHeight"> <map id="map" class="map" polyline="{{polyline}}" markers="{{markers}}" include-points="{{markers}}" ></map> </view>
2、 js文件
var coors; Page({ data: { polyline: [], markers: [], }, onReady: function() { this.mapContext = wx.createMapContext("map", this); }, onLoad: function(options) { // 獲取當(dāng)前地圖,設(shè)置經(jīng)緯度,傳遞過來的坐標(biāo),用戶下單的坐標(biāo)地址。 console.log(options); wx.getLocation({ success: (res) => { this.setData({ latitude: options.latitude, longitude: options.longitude }); this.getCenterLocation(res); wx.request({ url: 'https://apis.map.qq.com/ws/direction/v1/driving/?from=' + this.data.markers[0].latitude + ',' + this.data.markers[0].longitude + '&to=' + this.data.markers[1].latitude + ',' + this.data.markers[1].longitude + '&output=json&callback=cb&key=PD5BZ-K2VRO-CPEWZ-SOBAC-4KCDT-KAFLF', success: (res) => { coors = res.data.result.routes[0].polyline for (var i = 2; i < coors.length; i++) { coors[i] = coors[i - 2] + coors[i] / 1000000 } console.log(coors) //劃線 var b = []; for (var i = 0; i < coors.length; i = i + 2) { b[i / 2] = { latitude: coors[i], longitude: coors[i + 1] }; console.log(b[i / 2]) } this.setData({ polyline: [{ points: b, color: "#00ae20", width: 4, dottedLine: false }], }) } }) } }); }, // 兩個(gè)坐標(biāo) 一個(gè)下單地址,一個(gè)工程師接單地址,然后不停的更新工程師的坐標(biāo)位置。 getCenterLocation: function(res) { this.setData({ markers: [{ iconPath: "/resources/center.png", id: 0, latitude: res.latitude, longitude: res.longitude, width: 30, height: 30, alpha: 0.8, callout: { content: " 我的位置 ", color: "#ffffff", fontSize: 10, borderRadius: 10, bgColor: "#6e707c", padding: 5, display: "ALWAYS" } }, { iconPath: "/resources/user.png", id: 1, latitude: res.latitude + 0.1, longitude: res.longitude + 0.1, width: 30, height: 30, alpha: 0.8, callout: { content: " 工程師 ", color: "#ffffff", fontSize: 10, borderRadius: 10, bgColor: "#6e707c", padding: 5, display: "ALWAYS" } } ], }); }, });
3、wxss文件
.mapHeight { display: flex; flex-direction: column; } .map { flex: 1; height: 100vh; width: 100%; }
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。更多小程序商店請(qǐng)查看:小程序商店