羽毛大大 2017-09-21 04:21 采纳率: 50%
浏览 7518
已采纳

微信小程序之高德地图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天了,还不太懂,希望有大神能不吝赐教!!

  • 写回答

2条回答

  • Go 旅城通票 2017-09-21 05:58
    关注

    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 });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)(相关搜索:51单片机|单片机|测试代码)
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了,如何解决?(操作系统-ubuntu)
  • ¥20 matlab yalmip kkt 双层优化问题
  • ¥15 如何在3D高斯飞溅的渲染的场景中获得一个可控的旋转物体
  • ¥88 实在没有想法,需要个思路
  • ¥15 MATLAB报错输入参数太多