微信小程序----map路线规划

微信小程序----map路线规划

声明

bug: 页面脚的步行、骑行、驾车区域在真机测试是会出现不显示问题?
造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡!
解决办法:将该文本视图采用cover-view,放在map中。
感谢: 感谢Lrj_estranged指出问题!

效果图

进入页面直接定位到当前位置,输入目的地!

进入定位选择目的地

返回首页查看路线规划—选择驾车、步行、骑行

查看路线规划选择驾车、步行、骑行

原理

  1. 采用微信小程序的map组件;
  2. 采用高德地图的 微信小程序SDK获取规划路线的坐标点。

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%;">
    <cover-view class="tui-search-bottom {{show ? '' : 'tui-hide'}}">
	  <cover-view class="page-group">
	    <cover-view class="page-nav-list {{statusType == 'car' ? 'active' : ''}}" data-type="car" bindtap="goTo">驾车</cover-view>
	    <cover-view class="page-nav-list {{statusType == 'walk' ? 'active' : ''}}" data-type="walk" bindtap="goTo">步行</cover-view>
	    <cover-view class="page-nav-list {{statusType == 'ride' ? 'active' : ''}}" data-type="ride" bindtap="goTo">骑行</cover-view>
	  </cover-view>
	  <cover-view class="tui-warn">
	    {{distance}}米
	  </cover-view>
	  <cover-view class="tui-warn">
	    {{duration}}分钟
	  </cover-view>
	</cover-view>
  </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>

JS

var amapFile = require('../../src/js/amap-wx.js');
Page({
  data: {
    key: 'c290b7e016c85e8f279b2f80018c6fbf',
    show: false,
    currentLo : null,
    currentLa : null,
    newCurrentLo : null,
    newCurrentLa : null,
    distance : 0,
    duration : 0,
    markers : null,
    scale: 16,
    polyline: null,
    statusType: 'car',
    includePoints:[]
  },
  onLoad(){
    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: '../../src/images/navi_s.png',
            width: 32,
            height: 32
          }]
        });
      }
    })
  },
  getAddress(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);
  }
})

WXSS

.tui-map-search{
  width: 100%;
  height: 80rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;
  box-sizing: border-box;
  padding: 5rpx 10px;
  background-color: #fff;
  line-height: 70rpx;
}
.tui-map-input{
  height: 70rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  margin-left: 25px;
}
.tui-map-search-icon{
  position: absolute;
  top: calc(50% - 10px);
  left: 10px;
}
.tui-map{
  width: 100%;
  height: calc(100% - 80rpx);
  position: fixed;
  bottom: 0;
  left: 0;
}
.tui-map-direction{
  width: 32px;
  height: 32px;
  position: fixed;
  right: 10px;
  bottom: 80px;
  z-index: 100000;
}

.page-group{
  display: table;
  width: 100%;
  table-layout: fixed;
  background-color: #fff;
}
.page-nav-list{
  padding:20rpx 0 ;
  font-size: 30rpx;
  display: table-cell;
  text-align: center;
  width: 100%;
  color: #222;
}
.page-nav-list.active{color:blue;}
.tui-warn{
  height: 50px;
  line-height: 50px;
  padding-left: 10px;
  color: lightseagreen;
  font-size: 30rpx;
}
.tui-search-bottom{
  height: 150px;
  background: #fff;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
}

注意

  1. 在实例化 AMapWX 对象前,必须引入amap-wx.js,amap-wx.js下载
  2. 驾车、步行、骑行这三个类型返回的数据类似,所以直接采用drawPolyline方法进行数据处理,而公交返回的数据和他们相差太大,所以下一章另行讲解;
  3. wx.chooseLocation() API返回搜索坐标需要时间,如果在还未完成搜索定位前确定,会返回之前的定位位置。

其他

我的博客,欢迎交流!

我的CSDN博客,欢迎交流!

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

posted @ 2018-02-01 17:09 Newman·Li 阅读(...) 评论(...) 编辑 收藏
发布了578 篇原创文章 · 获赞 14 · 访问量 8万+
展开阅读全文
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符

微信程序之高德地图API路线规划

09-21

#wxml代码# ``` <view class="flex-style"> <view class="flex-item active" bindtouchstart="goToCar">驾车</view> <view class="flex-item" bindtouchstart="goToWalk">步行</view> <view class="flex-item" bindtouchstart="goToBus">公交</view> <view class="flex-item" bindtouchstart="goToRide">骑行</view> </view> <view class="map_box"> <map id="navi_map" longitude="{{longitude}}" latitude="{{latitude}}" scale="12" markers="{{markers}}" polyline="{{polyline}}" show-location="true"></map> </view> <view class="text_box"> <view class="text">{{distance}}</view> <view class="text">{{cost}}</view> <view class="detail_button" bindtouchstart="goDetail">详情</view> </view> ``` #js代码# ``` var amapFile = require('../../utils/amap-wx.js'); var config = require('../../utils/config.js'); Page({ data: { markers: [{ iconPath: "../../img/mapicon_navi_s.png", id: 0, latitude:'', longitude:'', width: 23, height: 33 },{ iconPath: "../../img/mapicon_navi_e.png", id: 0, latitude:'', longitude:'', width: 24, height: 34 }], distance: '', cost: '', polyline: [] }, onLoad: function() { var that = this; var key = config.Config.key; var myAmapFun = new amapFile.AMapWX({key: key}); myAmapFun.getDrivingRoute({ success: function(data){ origin: data[0].longitude,data[0].latitude; destination: data[1].longitude,data[1].latitude; var marker = [{ latitude: data[0].latitude, longitude: data[0].longitude }, { latitude: data[1].latitude, longitude: data[1].longitude } ] that.setData({ markers: marker[0], latitude: data[0].latitude, longitude: data[0].longitude }); that.setData({ markers: marker[1], latitude: data[1].latitude, longitude: data[1].longitude }); 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]) }) } } } that.setData({ polyline: [{ points: points, color: "#0091ff", width: 6 }] }); if(data.paths[0] && data.paths[0].distance){ that.setData({ distance: data.paths[0].distance + '米' }); } if(data.taxi_cost){ that.setData({ cost: '打车约' + parseInt(data.taxi_cost) + '元' }); } } }) }, goDetail: function(){ wx.navigateTo({ url: '../navigation_car_detail/navigation' }) }, goToCar: function (e) { wx.redirectTo({ url: '../navigation_car/navigation' }) }, goToBus: function (e) { wx.redirectTo({ url: '../navigation_bus/navigation' }) }, goToRide: function (e) { wx.redirectTo({ url: '../navigation_ride/navigation' }) }, goToWalk: function (e) { wx.redirectTo({ url: '../navigation_walk/navigation' }) } }) ``` 怎么改才能让marker的两个标记变成活的经纬度,原来的高德地图API是两个写死的经纬度,[高德路线规划](http://lbs.amap.com/api/wx/guide/route/route),现在这个样子是我自己改的,摸索了微信小程序3天了,还不太懂,希望有大神能不吝赐教!! 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览