|
|
|
@ -15,7 +15,7 @@ use Endroid\QrCode\Exceptions\DataDoesntExistsException; |
|
|
|
class MyDetailPage extends LazyRenderable |
|
|
|
{ |
|
|
|
|
|
|
|
protected static $js = [LinkUrl::VUE_JS, LinkUrl::ELEMENT_UI_JS]; |
|
|
|
protected static $js = [LinkUrl::VUE_JS, LinkUrl::ELEMENT_UI_JS, LinkUrl::API_GL_JS]; |
|
|
|
protected static $css = [LinkUrl::DETAIL_CSS, LinkUrl::ELEMENT_UI_CSS]; |
|
|
|
|
|
|
|
|
|
|
|
@ -54,6 +54,12 @@ class MyDetailPage extends LazyRenderable |
|
|
|
refuse_refund_note: "{$order['refuse_refund_note']}", |
|
|
|
total_refund_note: "{$order['total_refund_note']}", |
|
|
|
address: "{$order['address']}", |
|
|
|
market_lat:"{$order['market_lat']}", |
|
|
|
//market_lat:"22.851115",
|
|
|
|
market_lng:"{$order['market_lng']}", |
|
|
|
//market_lng:"108.346041",
|
|
|
|
user_lat:"{$order['lat']}", |
|
|
|
user_lng:"{$order['lng']}", |
|
|
|
note: "{$order['note']}", |
|
|
|
money: "{$order['money']}", |
|
|
|
total_money: "{$order['total_money']}", |
|
|
|
@ -73,7 +79,11 @@ class MyDetailPage extends LazyRenderable |
|
|
|
order_child_id:null, |
|
|
|
show_refund_2:true, |
|
|
|
show_refund_3:false, |
|
|
|
path:"{$path}" |
|
|
|
path:"{$path}", |
|
|
|
show_map:false, |
|
|
|
close_map:true, |
|
|
|
is_show:true, |
|
|
|
map:"" |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
refundNote(name,order_goods_id,order_child_id) { |
|
|
|
@ -124,6 +134,148 @@ class MyDetailPage extends LazyRenderable |
|
|
|
}); |
|
|
|
}).catch(() => { |
|
|
|
}); |
|
|
|
}, |
|
|
|
showMap() { |
|
|
|
this.is_show=true; |
|
|
|
if (!this.show_map){ |
|
|
|
this.show_map = true; |
|
|
|
this.close_map =false; |
|
|
|
this.initMap() |
|
|
|
} |
|
|
|
}, |
|
|
|
closeMap() { |
|
|
|
this.is_show=false; |
|
|
|
this.show_map = false; |
|
|
|
this.close_map =true; |
|
|
|
}, |
|
|
|
|
|
|
|
change2D() { |
|
|
|
this.map.setViewMode('2D'); |
|
|
|
}, |
|
|
|
|
|
|
|
change3D() { |
|
|
|
this.map.setViewMode('3D'); |
|
|
|
this.map.setPitch(70); |
|
|
|
}, |
|
|
|
|
|
|
|
initMap() { |
|
|
|
var center = new TMap.LatLng(this.market_lat, this.market_lng); |
|
|
|
//初始化地图
|
|
|
|
this.map = new TMap.Map("container", {rotation: 20,//设置地图旋转角度
|
|
|
|
pitch:30, //设置俯仰角度（0~45）
|
|
|
|
zoom:12,//设置地图缩放级别
|
|
|
|
center: center//设置地图中心点坐标
|
|
|
|
}); |
|
|
|
that = this; |
|
|
|
$.ajax({ |
|
|
|
url: "map_route", |
|
|
|
type: "get", |
|
|
|
contentType: "text/html; charset=utf-8", |
|
|
|
dataType: "json", |
|
|
|
data: { |
|
|
|
m_lat:that.market_lat, |
|
|
|
m_lng:that.market_lng, |
|
|
|
u_lat:that.user_lat, |
|
|
|
u_lng:that.user_lng, |
|
|
|
type:"bicycling" |
|
|
|
}, |
|
|
|
success: function (res) { |
|
|
|
if (res.status==0){ |
|
|
|
that.cb(res); |
|
|
|
} |
|
|
|
}, |
|
|
|
error: function (xhr, err) { |
|
|
|
console.log("错误", err) |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
//定义请求回调函数，在此拿到计算得到的路线，并进行绘制
|
|
|
|
cb(ret) { |
|
|
|
var coords = ret.result.routes[0].polyline, pl = []; |
|
|
|
//坐标解压（返回的点串坐标，通过前向差分进行压缩）
|
|
|
|
var kr = 1000000; |
|
|
|
for (var i = 2; i < coords.length; i++) { |
|
|
|
coords[i] = Number(coords[i - 2]) + Number(coords[i]) / kr; |
|
|
|
} |
|
|
|
//将解压后的坐标放入点串数组pl中
|
|
|
|
for (var i = 0; i < coords.length; i += 2) { |
|
|
|
pl.push(new TMap.LatLng(coords[i], coords[i+1])); |
|
|
|
} |
|
|
|
|
|
|
|
this.display_polyline(pl)//显示路线
|
|
|
|
|
|
|
|
//标记起终点marker
|
|
|
|
var marker = new TMap.MultiMarker({ |
|
|
|
id: 'marker-layer', |
|
|
|
map: this.map, |
|
|
|
styles: { |
|
|
|
"start": new TMap.MarkerStyle({ |
|
|
|
"width": 25, |
|
|
|
"height": 35, |
|
|
|
"anchor": { x: 16, y: 32 }, |
|
|
|
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png' |
|
|
|
}), |
|
|
|
"end": new TMap.MarkerStyle({ |
|
|
|
"width": 25, |
|
|
|
"height": 35, |
|
|
|
"anchor": { x: 16, y: 32 }, |
|
|
|
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png' |
|
|
|
}), |
|
|
|
"marker": new TMap.MarkerStyle({ |
|
|
|
"width": 45, |
|
|
|
"height": 52, |
|
|
|
"anchor": { x: 16, y: 32 }, |
|
|
|
"src": "../uploads/map/561.png" |
|
|
|
}) |
|
|
|
}, |
|
|
|
geometries: [{ |
|
|
|
"id": 'start', |
|
|
|
"styleId": 'start', |
|
|
|
"position": new TMap.LatLng(that.market_lat,that.market_lng) |
|
|
|
}, { |
|
|
|
"id": 'end', |
|
|
|
"styleId": 'end', |
|
|
|
"position": new TMap.LatLng(that.user_lat,that.user_lng) |
|
|
|
},{ //点标注数据数组
|
|
|
|
"id": "horseman", |
|
|
|
"styleId": "marker", |
|
|
|
"position": new TMap.LatLng(22.805566,108.412079), |
|
|
|
"properties": { |
|
|
|
"title": "marker" |
|
|
|
} |
|
|
|
}] |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
display_polyline(pl){ |
|
|
|
//创建 MultiPolyline显示折线
|
|
|
|
var polylineLayer = new TMap.MultiPolyline({ |
|
|
|
id: 'polyline-layer', //图层唯一标识
|
|
|
|
map: this.map,//绘制到目标地图
|
|
|
|
//折线样式定义
|
|
|
|
styles: { |
|
|
|
'style_blue': new TMap.PolylineStyle({ |
|
|
|
'color': '#3777FF', //线填充色
|
|
|
|
'width': 8, //折线宽度
|
|
|
|
'borderWidth': 5, //边线宽度
|
|
|
|
'borderColor': '#FFF', //边线颜色
|
|
|
|
'lineCap': 'round', //线端头方式
|
|
|
|
}) |
|
|
|
}, |
|
|
|
//折线数据定义
|
|
|
|
geometries: [ |
|
|
|
{ |
|
|
|
'id': 'pl_1',//折线唯一标识，删除时使用
|
|
|
|
'styleId': 'style_blue',//绑定样式名
|
|
|
|
'paths': pl |
|
|
|
} |
|
|
|
] |
|
|
|
}); |
|
|
|
}, |
|
|
|
mounted: function () { |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
|
lanzu_qinsheng
5 years ago
