微信小程序之高德地图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个回答

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 });
weixin_41844824
浅议永久 电脑上显示markers标志,但手机上没有显示是怎么回事
接近 2 年之前 回复
showbo
支付宝加好友偷能量挖,胡杨在等着我的召唤 回复羽毛大大: myAmapFun.getDrivingRoute({ success: function(data){。data是什么?看你的代码是数组,但是高德返回的是json对象,你自己搞清楚data的结构
接近 3 年之前 回复
qq_39719589
羽毛大大 我觉得我wxml文件写的有问题嘛,只能看到终点的图片,看不到起点的。
接近 3 年之前 回复
qq_39719589
羽毛大大 恩,好的
接近 3 年之前 回复
showbo
支付宝加好友偷能量挖,胡杨在等着我的召唤 回复羽毛大大: 继续在这里问或者提问题都行,新问题站内短信发我连接下就行
接近 3 年之前 回复
qq_39719589
羽毛大大 我再摸索摸索,有不会可以再问你吗?
接近 3 年之前 回复
showbo
支付宝加好友偷能量挖,胡杨在等着我的召唤 回复羽毛大大: 就是setData更新,没更新自己微信工具开发工具里面看是不是报错了。或者data.taxi_cost就不是等价于true的值,没执行setData
接近 3 年之前 回复
qq_39719589
羽毛大大 var points = []; ************************ that.setData({ cost: '打车约' + parseInt(data.taxi_cost) + '元' }); }那这一部分怎么改啊?第二个点总把第一个点覆盖掉,而且位置还不对,wxml中的map需要什么样的修改呢?
接近 3 年之前 回复

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

tonywu1061
tonywu1061 回复qq_37189596: 在那个路程规划页面的最下面有一个获取完整信息,会导向github地址,你就会发现它那个libs下面还有一个config.js的文件,示例页面里面没有提,就是配置一下高德的key
2 年多之前 回复
qq_37189596
我说算你狠 我也遇到这个问题了,这个var key的config怎么加啊
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐