频道栏目
首页 > 微信学院 > 微信小程序 > 正文
微信小程序根据经纬度规划路线实例展示
2018-08-30 10:47:23           
收藏   我要投稿

效果图:

1、wxml文件


2、 js文件

var coors;
Page({
  data: {
    polyline: [],
    markers: [],
  },
  onReady: function() {
    this.mapContext = wx.createMapContext("map", this);
  },
  onLoad: function(options) {
    // 获取当前地图,设置经纬度,传递过来的坐标,用户下单的坐标地址。
    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
              }],
            })
          }
        })
      }
    });
  },
  //  两个坐标 一个下单地址,一个工程师接单地址,然后不停的更新工程师的坐标位置。
  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%;
}
点击复制链接 与好友分享!回本站首页
上一篇:微信小程序调起键盘性能优化实战
下一篇:微信小程序之旋转木马实战教程
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站