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

问题描述：

#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是两个写死的经纬度，高德路线规划，现在这个样子是我自己改的，摸索了微信小程序3天了，还不太懂，希望有大神能不吝赐教！！

答

markers是数组，同一更新好经纬度后整个更新，而不是设置markers为当个marker

                     //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 markers = that.data.markers;
                    markers[0].longitude = data[0].longitude; markers[0].latitude = data[0].latitude
                    markers[1].longitude = data[1].longitude; markers[1].latitude = data[1].latitude
                    that.setData({ markers: markers });

答

var key = config.Config.key;请问这句是什么意思？

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

相关推荐