小程序使用高德地图 map 导航路线规划

驾车路线规划

首先，引入 amap-wx.js 文件（amap-wx.js 从相关下载页面下载的 zip 文件解压后得到）。
然后，构造 AMapWX 对象，并调用 getDrivingRoute 方法。

 需要特别注意的是；
  自定义气泡不对应显示
  	解决方案：
  	气泡的时候需要给markers加上id，
    markers: [{
      iconPath: "../../img/mapicon_navi_s.png",
      id: 0,
      latitude: 39.989643,
      longitude: 116.481028,
      width: 23,
      height: 33
    },{
      iconPath: "../../img/mapicon_navi_e.png",
      id: 0,
      latitude: 39.90816,
      longitude: 116.434446,
      width: 24,
      height: 34
    }],
  自定义气泡会被markers原点遮挡
	解决方案：
	label下面的属性color，bgColor删除即可
	label: {
			// color: '#1C2336',
			fontSize: 12,
			borderRadius: 50,
			padding: 5,
			textAlign: 'center',
			// bgColor: '#FFFFFF',
			// content: ''
		},

https://lbs.amap.com/api/wx/guide/route/route#driving （高德官网）
代码如下

myAmapFunamapFile(){
				// 获取地图
				let that = this;
				let	myAmapFun = new amapFile.AMapWX({
					key: '需要自己的key',
					
				});
				// 初始化高德地图SDK,记得换成自己的key
				//自己的方法获取数据
				WebApi.getorderInfo({
					orderType: this.orderType,
					id: this.id
				}).then(res=>{
					that.orderDetail = res.data;
					
					that.status = res.data.orderStatus;
					for (let item of that.orderDetail.orderOperationList) {
						that.$set(item,'pic',[])
						if (item.operationPicture != ''&&item.operationPicture != null) {
							let operationPicture = item.operationPicture.split(',')
							item.operationPicture = operationPicture;
							for(let pic of operationPicture) {
								var str = pic;
								var index = str.substr(-3);
								console.log(str,index,item)
								item.pic.push(
									{
										urls:pic,
										type:index
									}
								)
								
							}
							
						}
					}
				
					if (that.status == 0) {
						that.countdownIntervalId = setInterval(() => {
							let countdown = Util.orderCountDown(that.orderDetail.orderTime);
							if (typeof countdown == "boolean") {
								clearInterval(that.countdownIntervalId);
								// 处理关闭订单
								that.getDetail();
							} else that.countdown = countdown;
						}, 1000);
						that.countdown = Util.orderCountDown(that.orderDetail.orderTime);
					}
					//获取经纬度
					uni.getLocation({
						type: 'gcj02', //返回可以用于uni.openLocation的经纬度
						geocode: true,
						success: function(res) {
							const latitude = res.latitude;
							const longitude = res.longitude;
							// 获取当前位置
							//利用amap-wx.js获取当前定位地址
							myAmapFun.getRegeo({
								location:longitude + ',' + latitude, 
								success: function(res) {//成功后的回调
									console.log(res)
								    that.address = res[0].name;
								}
							})
								 // 获取当前位置到终点
							myAmapFun.getDrivingRoute({
								//from参数传入当前定位
								origin: longitude+','+latitude, // 起點
								destination:that.orderDetail.longitude+','+that.orderDetail.latitude, // 終點
								success: function(data) {
									 const points = []
									 //每一对途径经纬度
									if (data.paths && data.paths[0] && data.paths[0].steps) {
										const steps = data.paths[0].steps // 獲取途徑點
										steps.forEach(item => {
										  const poLen = item.polyline.split(';') // 對每一組途徑點的經緯度進行分割
										  poLen.forEach(data => {
											points.push({
											  longitude: parseFloat(data.split(',')[0]),
											  latitude: parseFloat(data.split(',')[1])
											})
										  })
										})
									}
									// 绑定路线，多对经纬度连接
									that.polyline = [
										{
										  points: points,
										  color: '#0FBA75',
										  width: 10
										}
									]
									//公里
									if(data.paths[0] && data.paths[0].distance){
									  that.distance = (data.paths[0].distance/1000).toFixed(2);
									}
									 var time=[]
									 //换算天时分秒
									if(data.paths[0] && data.paths[0].duration){
									  // that.cost= parseInt(data.paths[0].duration/60) + '分钟';
									      var day =parseInt(data.paths[0].duration/86400)
									      var hour=parseInt((data.paths[0].duration%86400)/3600)
									      var min=parseInt(((data.paths[0].duration%86400)%3600)/60)
									      var sec=parseInt(((data.paths[0].duration%86400)%3600)%60)
									      time[0]=day>0?day:0
									      time[1]=hour>0?hour:0
									      time[2]=min>0?parseFloat(min):0
									      time[3]=sec>0?parseFloat(sec):0
									}
									  if(time[0]>0) {
										   that.cost = time[0] + '天' +time[1]+'小时'+time[2]+'分钟'
									  } else if(time[0]<=0){
										  if(time[1]>0) {
											that.cost = time[1]+'小时'+time[2]+'分钟'
										  } else {
										   that.cost = time[2]+'分钟'
										  }
									  }
									 //切记id必传,气泡数据，必须和markers数据保持一致
									  that.customCalloutMarkerIds = [{
										id:1,
										latitude: latitude,
										longitude: longitude,
										distance:that.distance,
										cost:that.cost,
										label: {
										
											// color: '#1C2336',
											fontSize: 12,
											borderRadius: 50,
											padding: 5,
											textAlign: 'center',
											// bgColor: '#FFFFFF',
											content: ''
										},
										customCallout: {
										            anchorY: 70,
										            anchorX: 0,
										            display: 'ALWAYS',
										          }
										},
									]
									//markers数据
									that.covers = [{
										id:1,
										latitude: latitude,
										longitude: longitude,
										// iconPath: IMG_BASE_URL+"static/map1.png",
										label: {
										//自定义气泡不要color,bgColor
											// color: '#1C2336',
											fontSize: 12,
											borderRadius: 50,
											padding: 5,
											textAlign: 'center',
											// bgColor: '#FFFFFF',
											// content: ''
										},
										customCallout: {
										            anchorY: 70,
										            anchorX: 0,
										            display: 'ALWAYS',
										          }
										}, {
											id:2,
											latitude: that.orderDetail.latitude,
											longitude: that.orderDetail.longitude,
											iconPath: "../static/pack7.png",
											width: '42rpx',
											height: '64rpx',
											label: {
												content: '事故车位置',
												color: '#1C2336',
												fontSize: 12,
												borderRadius: 50,
												padding: 5,
												textAlign: 'center',
												bgColor: '#FFFFFF',
											},
											customCallout: {
											            anchorY: 70,
											            anchorX: 0,
											            display: 'ALWAYS',
											          }
										},
									]
								},
							})
						}
					});
				});
				
						
			},
			

markers：数据
polyline：多对经纬度连接成线
<map  class="map" style="width: 100%; height: 300px;" :latitude="startposition.lat" :longitude="startposition.lng"
				:markers="covers" :polyline="polyline"
				@markertap="openMap(startposition.lat,startposition.lng,initFoemdata.title)"  :scale="7">
				//自定义气泡
					<cover-view slot="callout">  
						<block  v-for="(item, index) in customCalloutMarkerIds" :key="index">
					        <cover-view  :marker-id="1">
					          <cover-view class="bigBox">
					            <cover-view class="box" style="background:#fff;font-size: 24rpx;">
					              <cover-view class="font">距您还有</cover-view>
					              <cover-view class="right" style="color: #0FBA75;">{{item.distance}}</cover-view>
								  <cover-view class="font">公里</cover-view>
					            </cover-view>
								<cover-view class="content" style="font-size: 24rpx;text-align: center;">
									<cover-view>预计需要</cover-view>
									<cover-view style="color: #0FBA75;">{{item.cost}}</cover-view>
								 </cover-view>
					          </cover-view>
					        </cover-view>
						</block>
					</cover-view>
			</map>