新增 地图路线规划

.gitignore

@@ -27,4 +27,4 @@ build/Release
 # Dependency directory
 # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
 node_modules
-
+.DS_Store

miniprogram/app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "pages/demo/demo",
     "pages/index/index",
     "pages/takePhoto/takePhoto",
     "pages/takePhoto/success/success",
@@ -12,7 +13,7 @@
     "pages/securityCheck/securityCheck",
     "pages/train/train"
   ],
-  "requiredPrivateInfos": ["getLocation"],
+  "requiredPrivateInfos": ["getLocation", "chooseLocation"],
   "window": {
     "backgroundColor": "#F6F6F6",
     "backgroundTextStyle": "light",
@@ -24,7 +25,8 @@
   "tabBar": {
     "selectedColor": "#1195db",
     "color": "#8a8a8a",
-    "list": [{
+    "list": [
+      {
         "pagePath": "pages/takePhoto/takePhoto",
         "text": "随身拍",
         "selectedIconPath": "./images/tabs/camera-.png",
@@ -47,12 +49,16 @@
   "permission": {
     "scope.userLocation": {
       "desc": "你的位置信息将用于小程序位置接口的效果展示"
+    },
+    "scope.chooseLocation": {
+      "desc": "你的位置信息将用于小程序位置接口的效果展示"
     }
   },
   "lazyCodeLoading": "requiredComponents",
   "sitemapLocation": "sitemap.json",
   "style": "v2",
-  "cache": [{
+  "cache": [
+    {
       "pagePath": "pages/takePhoto/takePhoto",
       "text": "随身拍",
       "selectedIconPath": "./images/tabs/camera-.png",
@@ -77,4 +83,4 @@
       "iconPath": "./images/tabs/train.png"
     }
   ]
-}
+}

miniprogram/app.wxss

@@ -11,6 +11,14 @@ view {
   display: flex;
 }
 
+.jcsb {
+  justify-content: space-between;
+}
+
+.jcsa {
+  justify-content: space-around;
+}
+
 .mt100 {
   margin-top: 100rpx
 }

miniprogram/pages/demo/data.js

@@ -0,0 +1,202 @@
+module.exports = {
+  status: 0,
+  message: "Success",
+  request_id: "b891b5d8af1543cf879fdfe6837c5104",
+  result: {
+    routes: [
+      {
+        mode: "DRIVING",
+        distance: 2587,
+        duration: 8,
+        traffic_light_count: 7,
+        toll: 0,
+        restriction: { status: 1 },
+        polyline: [
+          31.27177,
+          121.479892,
+          113,
+          85,
+          196,
+          217,
+          0,
+          0,
+          -10,
+          -236,
+          3,
+          -334,
+          4,
+          -220,
+          0,
+          0,
+          409,
+          22,
+          409,
+          51,
+          354,
+          61,
+          248,
+          59,
+          569,
+          190,
+          172,
+          72,
+          455,
+          208,
+          416,
+          224,
+          0,
+          0,
+          187,
+          -143,
+          53,
+          -242,
+          151,
+          -514,
+          98,
+          -326,
+          61,
+          -167,
+          65,
+          -171,
+          119,
+          -266,
+          0,
+          0,
+          188,
+          -154,
+          358,
+          -650,
+          527,
+          -904,
+          -17,
+          -121,
+          89,
+          -123,
+          193,
+          -298,
+          420,
+          -680,
+          210,
+          -295,
+          322,
+          -735,
+          157,
+          -418,
+          1138,
+          -3295,
+          235,
+          -635,
+          140,
+          -423,
+          74,
+          -259,
+          53,
+          -306,
+          29,
+          -283,
+          332,
+          -3836,
+          0,
+          0,
+          -162,
+          -93,
+          -236,
+          -9,
+          -193,
+          25,
+          -172,
+          46,
+          -67,
+          32,
+          -64,
+          50,
+          -355,
+          81,
+          -531,
+          101,
+          -1046,
+          186,
+          -775,
+          151,
+          0,
+          0,
+          -61,
+          -253,
+          -35,
+          -87,
+          -121,
+          -256,
+          -100,
+          -269,
+        ],
+        steps: [
+          {
+            instruction: "沿内部道路行驶44米,左转",
+            polyline_idx: [0, 5],
+            road_name: "内部道路",
+            dir_desc: "",
+            distance: 44,
+            act_desc: "左转",
+            accessorial_desc: "",
+          },
+          {
+            instruction: "沿内部道路向西行驶75米,右转",
+            polyline_idx: [6, 13],
+            road_name: "内部道路",
+            dir_desc: "西",
+            distance: 75,
+            act_desc: "右转",
+            accessorial_desc: "",
+          },
+          {
+            instruction: "沿东江湾路行驶349米,左转",
+            polyline_idx: [14, 31],
+            road_name: "东江湾路",
+            dir_desc: "",
+            distance: 349,
+            act_desc: "左转",
+            accessorial_desc: "",
+          },
+          {
+            instruction: "沿广中路行驶197米,偏右转",
+            polyline_idx: [32, 47],
+            road_name: "广中路",
+            dir_desc: "",
+            distance: 197,
+            act_desc: "偏右转",
+            accessorial_desc: "",
+          },
+          {
+            instruction: "沿广中路行驶1.4公里,左转",
+            polyline_idx: [48, 83],
+            road_name: "广中路",
+            dir_desc: "",
+            distance: 1400,
+            act_desc: "左转",
+            accessorial_desc: "",
+          },
+          {
+            instruction: "沿株洲路向南行驶408米,右转然后立即左转",
+            polyline_idx: [84, 105],
+            road_name: "株洲路",
+            dir_desc: "南",
+            distance: 408,
+            act_desc: "右转",
+            accessorial_desc: "然后立即左转",
+          },
+          {
+            instruction: "沿内部道路行驶89米,",
+            polyline_idx: [106, 115],
+            road_name: "内部道路",
+            dir_desc: "",
+            distance: 89,
+            act_desc: "",
+            accessorial_desc: "",
+          },
+        ],
+        tags: [],
+        taxi_fare: { fare: 18 },
+      },
+    ],
+  },
+};

miniprogram/pages/demo/demo.js

@@ -0,0 +1,128 @@
+// pages/demo/demo.js
+const data = require("./data.js");
+// 引入SDK核心类
+let QQMapWX = require("../../utils/qqmap-wx-jssdk.min");
+
+// 实例化API核心类
+let qqmapsdk = new QQMapWX({
+  key: "Y2BBZ-IHRKU-V42VO-BFQEE-K7252-ZBBSF", // 必填
+});
+Page({
+  data: {
+    latitude: 31.271729,
+    longitude: 121.483641,
+    start: {
+      address: "上海市虹口区东江湾路444号",
+      errMsg: "chooseLocation:ok",
+      latitude: 31.271447,
+      longitude: 121.480604,
+      name: "虹口足球场",
+    },
+    end: {
+      address: "上海市虹口区株洲路258弄",
+      errMsg: "chooseLocation:ok",
+      latitude: 31.276367,
+      longitude: 121.464754,
+      name: "意和家园",
+    },
+  },
+  //在Page({})中使用下列代码
+  //触发表单提交事件，调用接口
+  formSubmit() {
+    let { start, end } = this.data;
+    if (Object.keys(start).length === 0) {
+      wx.showToast({
+        title: "请选择起点",
+        icon: "none",
+        duration: 2000,
+      });
+      return;
+    }
+    if (Object.keys(end).length === 0) {
+      wx.showToast({
+        title: "请选择终点",
+        icon: "none",
+        duration: 2000,
+      });
+      return;
+    }
+    let from = `${start.latitude},${start.longitude}`;
+    let to = `${end.latitude},${end.longitude}`;
+    //调用距离计算接口
+    qqmapsdk.direction({
+      mode: "driving", //可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
+      //from参数不填默认当前地址
+      from,
+      to,
+      success: (res) => {
+        let coors = res.result.routes[0].polyline,
+          pl = [];
+        //坐标解压（返回的点串坐标，通过前向差分进行压缩）
+        let kr = 1000000;
+        for (let i = 2; i < coors.length; i++) {
+          coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
+        }
+        //将解压后的坐标放入点串数组pl中
+        for (let i = 0; i < coors.length; i += 2) {
+          pl.push({ latitude: coors[i], longitude: coors[i + 1] });
+        }
+        //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
+        this.drawPolyline(pl);
+      },
+      fail: function (error) {
+        console.error(error);
+      },
+    });
+  },
+  drawPolyline(pl) {
+    this.setData({
+      latitude: pl[0].latitude,
+      longitude: pl[0].longitude,
+      polyline: [
+        {
+          points: pl,
+          color: "#FF0000DD",
+          width: 4,
+        },
+      ],
+    });
+  },
+  init() {
+    let coors = data.result.routes[0].polyline,
+      pl = [];
+    //坐标解压（返回的点串坐标，通过前向差分进行压缩）
+    let kr = 1000000;
+    for (let i = 2; i < coors.length; i++) {
+      coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
+    }
+    //将解压后的坐标放入点串数组pl中
+    for (let i = 0; i < coors.length; i += 2) {
+      pl.push({ latitude: coors[i], longitude: coors[i + 1] });
+    }
+    //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
+    this.drawPolyline(pl);
+  },
+  getStart() {
+    wx.chooseLocation({
+      success: (start) => {
+        console.log(start);
+        this.setData({
+          start,
+        });
+      },
+    });
+  },
+  getEnd() {
+    wx.chooseLocation({
+      success: (end) => {
+        console.log(end);
+
+        this.setData({
+          end,
+        });
+      },
+    });
+  },
+  onLoad() {},
+  onShow() {},
+});

miniprogram/pages/demo/demo.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

miniprogram/pages/demo/demo.wxml

@@ -0,0 +1,16 @@
+<!--地图容器-->
+<map id="myMap" style="width: 100%; height: 300px;margin-bottom: 30rpx;" longitude="{{longitude}}" latitude="{{latitude}}" scale='14' polyline="{{polyline}}" show-location>
+</map>
+<view class="card">
+  <view class="df aic jcsa mb30" style="width: 100%;">
+    <view>起点:</view>
+    <view class="ipt" bind:tap="getStart">{{start.name||'选择起点位置'}}</view>
+  </view>
+  <view class="df aic jcsa mb30">
+    <view>终点:</view>
+    <view class="ipt" bind:tap="getEnd">{{end.name||'选择终点位置'}}</view>
+  </view>
+  <!--提交表单数据-->
+  <!-- <button class="mb20" type="primary" bind:tap="formSubmit">路线规划</button> -->
+  <button type="primary" bind:tap="init">Demo</button>
+</view>

miniprogram/pages/demo/demo.wxss

@@ -0,0 +1,19 @@
+/* pages/demo/demo.wxss */
+.card {
+  border: 1rpx solid rgba(221, 221, 221, 0.116);
+  border-radius: 20rpx;
+  box-shadow: 2rpx 2rpx 20rpx #ddd;
+  padding: 30rpx;
+  margin: 0 20px;
+  box-sizing: border-box;
+}
+
+.ipt {
+  width: 500rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+  padding-left: 20rpx;
+  font-size: 14px;
+  color: #777;
+  overflow: hidden;
+}

project.private.config.json

@@ -27,7 +27,7 @@
     }
   },
   "setting": {
-    "urlCheck": true,
+    "urlCheck": false,
     "preloadBackgroundData": false,
     "coverView": true,
     "autoAudits": false,