羽毛大大 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条)

报告相同问题?

悬赏问题

  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗?
  • ¥15 错误 LNK2001 无法解析的外部符号
  • ¥50 安装pyaudiokits失败
  • ¥15 计组这些题应该咋做呀
  • ¥60 更换迈创SOL6M4AE卡的时候,驱动要重新装才能使用,怎么解决?
  • ¥15 让node服务器有自动加载文件的功能