uniapp调用高德地图实现路线规划

使用uniapp调用高德地图

参考 高德地图开放api

调试平台 ios

首先,引入 amap-wx.js 文件

import amapFile from './../../util/amap-wx.js'

配置高德地图key构造AMapWX对象 获取key

var that = this;
let myAmapFun = new amapFile.AMapWX({key:this.key});//this.key=高德地图申请密钥

调用getRidingRoute(骑行路线规划)方法

data() {
	return {
		key:'高德地图密钥',
		markers: [{
		      iconPath: "",
		      id: 0,
		      latitude: 39.989643,
		      longitude: 116.481028,
		      width: 23,
		      height: 33
		    },{
		      iconPath: "",
		      id: 0,
		      latitude: 39.90816,
		      longitude: 116.434446,
		      width: 24,
		      height: 34
		    }],
		    distance: '',
		    cost: '',
		    polyline: []
	}
},

myAmapFun.getRidingRoute({
      origin: '116.481028,39.989643',
      destination: '116.434446,39.90816',
      success: function(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])
              })
            } 
          }
        }
        that.setData({//这里setData调试时报错,后面自己封装了setData方法(待完善)
          polyline: [{
            points: points,
            color: "#0091ff",
            width: 6
          }]
        });
        if(data.paths[0] && data.paths[0].distance){
          that.setData({
            distance: data.paths[0].distance + '米'
          });
		  console.log(that.distance)
        }
        if(data.taxi_cost){
          that.setData({
            cost: '打车约' + parseInt(data.taxi_cost) + '元'
          });
        }
          
      },
      fail: function(info){

      }
})

setData方法

setData:function(obj){
	let that = this;    
	let keys = [];    
	let val,data;    
	Object.keys(obj).forEach(function(key){    
	 keys = key.split('.');    
	 val = obj[key];    
	 data = that.$data;    
	 keys.forEach(function(key2,index){    
	     if(index+1 == keys.length){    
	         that.$set(data,key2,val);    
	     }else{    
	         if(!data[key2]){    
	            that.$set(data,key2,{});    
	         }    
	     }    
	     data = data[key2];    
	 })    
	});    
} 

本着先跑通流程的原则,还是简陋的画出路线了,还有有待完善。

你可能感兴趣的:(uniapp调用高德地图实现路线规划)