<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>拉K平台路况预报</title>
<link rel="stylesheet" href="css/roadForecast.css">
<script src="js/public.js"></script>
<script type="text/javascript"
src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=sCUs9oO39UCFQMXXBjdlmz02G0RjBmfd"></script>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<style>
/*css 样式表*/
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" class="main" :style="style">
<!-- 顶部-->
<div class="roadForecastHead">
<div class="roadForecastHeadLeft">
<h2>拉K平台路况预报</h2>
<p>提前了解路况 运输畅通无阻</p>
</div>
<div class="roadForecastHeadRight">
<div class="roadForecastHeadRightText">
<p>城市/区:{{weather.province}} / {{weather.city}}</p>
<p>天气：{{weather.weather}} / {{weather.temperature}}°C </p>
<p>风向：{{weather.winddirection}} / {{weather.windpower}}级</p>
<p>{{weather.reporttime}}</p>
</div>
</div>
</div>
<div class="roadForecastContent">
<!-- 地图-->
<div id="container">
</div>
<!-- 信息-->
<div class="roadForecastInfo">
<div v-for="(item,index) in path" :key="index" class="roadForecastContentInfo" >
<div class="roadForecastContentInfoTitle" :style="{borderLeftColor:item.color}">
<div class="roadForecastContentInfoTitleH">{{item.name}}</div>
</div>
<div class="roadForecastContentInfoTitleS">{{item.start_time_str}} - {{item.end_time_str}}</div>
<div class="roadForecastContentInfoText">
{{item.start_address}}至{{item.end_address}}{{item.direction==0?'双向':'单向'}}路段，总距离{{item.distance}}公里，{{item.type_str}}，{{item.info}}
</div>
</div>
</div>
<!-- 二维码-->
<div class="roadForecastContentFoot">
<div class="roadForecastContentFootLine"></div>
<div class="roadForecastContentFootEwm">
<img src="images/ewm.png" alt="">
</div>
<div class="roadForecastContentFootText">拉K大件物流平台制作</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
baseUrl: 'https://v3back.dajianwuliu.net',
path: [],
theme: [],
weather: {},
style: '',
},
mounted() {
this.init()
},
methods: {
init() {
axios({
method: 'get',
url: this.baseUrl + '/LakMap/getPathWarInfo'
}).then(res => {
let response = res.data.result;
this.path = response.path;
this.theme = response.theme;
let style = `background: url("${this.baseUrl}${this.theme[0]}") top left no-repeat, url("${this.baseUrl}${this.theme[1]}") bottom left no-repeat, ${this.theme[2]};background-size: 100%;`;
this.style = style;
this.weather = response.weather;
this.initMap()
});
},
initMap() {
let that = this;
// 创建地图
var map = new BMapGL.Map('container'); // 创建Map实例
that.map = map;
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
let viewPoints = []
let path=that.path;
for (let i = 0; i < path.length; i++) {
let colorI=i;
var defineStr = "var arrayPoint" + i.toString();
eval(defineStr = []);
defineStr.push(new BMapGL.Point(path[i].start_lng, path[i].start_lat))
viewPoints.push(new BMapGL.Point(path[i].start_lng, path[i].start_lat))
for (let j = 0; j < path[i].pois.length; j++) {
defineStr.push(new BMapGL.Point(path[i].pois[j][0], path[i].pois[j][1]))
viewPoints.push(new BMapGL.Point(path[i].pois[j][0], path[i].pois[j][1]))
}
defineStr.push(new BMapGL.Point(path[i].end_lng, path[i].end_lat))
viewPoints.push(new BMapGL.Point(path[i].end_lng, path[i].end_lat))
//驾车路线
var drivingStr = "var driving" + i.toString();
eval(drivingStr);
drivingStr = new BMapGL.DrivingRoute(map,
{
renderOptions: {map: map, autoViewport: true},
onPolylinesSet: function (routes) {
searchRoute = routes[0].getPolyline();//导航路线
map.addOverlay(searchRoute);
},
onPolylinesSet: function (routes) {
//设置线条样式，线路分为几段
for (var i = 0; i < routes.length; i++) {
routes[i].getPolyline().setStrokeWeight(8);
routes[i].getPolyline().setStrokeOpacity(1);
routes[i].getPolyline().setStrokeColor(path[colorI].color);
}
},
onMarkersSet: function (routes) {
for (var i = 0; i < routes.length; i++) {
if (i == 0 || i == routes.length - 1) {
map.removeOverlay(routes[i].marker);
} else {
map.removeOverlay(routes[i].Um);
}
}
}
});
//路线查询
var waypointsStr = "var waypoints" + i.toString();
eval(waypointsStr);
waypointsStr = defineStr.slice(1, defineStr.length - 1);//多出的一段单独进行search
drivingStr.search(defineStr[0], defineStr[defineStr.length - 1], {waypoints: waypointsStr});
if (i==path.length-1){
setTimeout(function () {
map.setViewport(viewPoints);
}, 1000);
}
}
},
}
})
</script>
</body>
</html>
网友评论