Skip to content

A
Athena
Commit eb72c7a7 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 3edec8ce
Hide whitespace changes
Inline Side-by-side
Showing with 257 additions and 154 deletions
src/components/global/tripMap.vue
View file @ eb72c7a7
......@@ -35,12 +35,20 @@
</template>
<script>
export default {
props: ["locationArray"],
props: ["locationArray", "type"],
name: 'tripMap',
data() {
return {
directionsDisplay: new google.maps.DirectionsRenderer(),
directions: new google.maps.DirectionsService(), //获取路线请求的服务
renderer: new google.maps.DirectionsRenderer(), //
polyline: {}, //线路
map: {},
icons: {
trafficImage: "http://imgfile.oytour.com/static/location_01.png",
hotelImage: "http://imgfile.oytour.com/static/location_hotel.png",
scenicImage: "http://imgfile.oytour.com/static/location_scenic.png",
planeImage: "http://imgfile.oytour.com/static/location_plane.png"
}
}
},
watch: {
......@@ -60,6 +68,8 @@
methods: {
// 地图实例
mapBuild() {
let _this = this;
//this.polyline = {};
if (this.locationArray && this.locationArray.length > 0) {
let lat = parseFloat(this.locationArray[0].lat)
let lng = parseFloat(this.locationArray[0].lng)
......@@ -74,25 +84,17 @@
mapTypeId: google.maps.MapTypeId.ROADMAP,
gestureHandling: 'greedy'
});
this.directionsDisplay.setMap(this.map);
this.calcRoute()
}
},
checkItemIsExists(arr, checkItem) {
var isExists = false;
for (var i = 0; i < arr.length; i++) {
if (arr[i].location == checkItem.location && !isExists) {
isExists = true;
this.renderer.setMap(this.map);
// 线条设置
var polyOptions = {
strokeColor: '#000000', // 颜色
strokeOpacity: 1.0, // 透明度
strokeWeight: 2 // 宽度
}
}
return isExists;
},
// 创建路径规划
calcRoute: function () {
// 分解数据 获得起 止 以及中间数据
if (this.locationArray && this.locationArray.length > 0) {
let _this = this;
let waypoints = [];
this.polyline = new google.maps.Polyline(polyOptions);
this.polyline.setMap(this.map); // 装载
let allPoints = [];
//去掉重复的数据
this.locationArray.forEach((x, index) => {
if (x.lat && x.lng) {
......@@ -100,102 +102,172 @@
location: x.lat + ',' + x.lng,
type: x.type,
name: x.name,
isFly: x.isFly
isFly: x.isFly,
trafficType: x.trafficType
}
if (!_this.checkItemIsExists(waypoints, obj)) {
waypoints.push(obj);
if (this.type == 1) {
if (!_this.checkItemIsExists(allPoints, obj)) {
allPoints.push(obj);
}
} else {
if (!_this.checkItemIsExists(allPoints, obj, 2)) {
allPoints.push(obj);
}
}
}
});
var startArray = waypoints[0].location.split(',');
let lat = parseFloat(startArray[0]);
let lng = parseFloat(startArray[1]);
// 线条设置
var polyOptions = {
strokeColor: '#000000', // 颜色
strokeOpacity: 1.0, // 透明度
strokeWeight: 2 // 宽度
}
var poly = new google.maps.Polyline(polyOptions);
poly.setMap(_this.map); // 装载
_this.map.setCenter(new google.maps.LatLng(lat, lng));
_this.map.setZoom(9);
console.log(waypoints, 'waypoints');
/* 循环标出所有坐标 */
for (var i = 0; i < waypoints.length; i++) {
var loc = waypoints[i].location.split(',');
var path = poly.getPath(); //获取线条的坐标
path.push(new google.maps.LatLng(loc[0], loc[1])); //为线条添加标记坐标
//生成标记图标
var image = {}
var type = waypoints[i].type;
var isFly = waypoints[i].isFly;
//交通
if (type == 1) {
image = {
url: 'http://imgfile.oytour.com/static/location_01.png', // image is 512 x 512
scaledSize: new google.maps.Size(30, 40),
};
}
//住宿
if (type == 3) {
image = {
url: 'http://imgfile.oytour.com/static/location_hotel.png',
scaledSize: new google.maps.Size(40, 40),
}
}
//景点
if (type == 2) {
image = {
url: 'http://imgfile.oytour.com/static/location_scenic.png',
scaledSize: new google.maps.Size(35, 45),
}
this.calcRoute(allPoints)
}
},
checkItemIsExists(arr, checkItem, type) {
var isExists = false;
for (var i = 0; i < arr.length; i++) {
if (type) {
if (arr[i].location == checkItem.location && !isExists && arr[i].type == checkItem.type) {
isExists = true;
}
//飞机
if(isFly == 1){
image = {
url: 'http://imgfile.oytour.com/static/location_plane.png',
scaledSize: new google.maps.Size(30, 30),
}
} else {
if (arr[i].location == checkItem.location && !isExists) {
isExists = true;
}
}
let marker = new MarkerWithLabel({
position: new google.maps.LatLng(loc[0], loc[1]),
icon: image, //标记自定义图标
draggable: false, //不可拖动
map: _this.map, //地图实例
labelContent: i + 1, //label的内容
labelAnchor: new google.maps.Point(0, 0), //label的位置，可以调
labelClass: "labels", // the CSS class for the label
labelStyle: {
background: '#fff',
borderRadius: '50%',
marginLeft: '-10px',
marginTop: '-35px',
width: '19px',
height: '19px',
textAlign: 'center',
lineHeight: '20px'
}
});
//景点
if (type == 2) {
let infowindow = new google.maps.InfoWindow({
content: '<div>' + waypoints[i].name + '</div>',
size: new google.maps.Size(50, 50)
});
infowindow.open(_this.map, marker);
marker.addListener('click', function () {
infowindow.close();
})
}
if (type == 3 || type == 2 || isFly==1) {
marker.labelContent = ''
marker.labelStyle = 'background:transparent'
}
return isExists;
},
// 创建路径规划
calcRoute: function (waypoints) {
console.log(waypoints, 'waypoints');
let _this = this;
var startArray = waypoints[0].location.split(',');
let lat = parseFloat(startArray[0]);
let lng = parseFloat(startArray[1]);
this.map.setCenter(new google.maps.LatLng(lat, lng));
this.map.setZoom(13);
//全部
if (this.type == 1) {
/* 循环标出所有坐标 */
this.drawDrivingRute(waypoints);
}
//每天
else {
/* 循环标出所有坐标 */
for (var i = 0; i < waypoints.length - 1; i++) {
var currentItem = waypoints[i];
var nextItem = waypoints[i + 1];
if (currentItem && currentItem.trafficType == 4) {
this.drawWalkRoute(currentItem.location, nextItem.location);
this.addMarker(currentItem, i+1),
this.addMarker(nextItem, i + 2);
} else {
var newArray = [];
newArray.push(currentItem);
newArray.push(nextItem);
this.drawDrivingRute(newArray);
}
}
}
},
//画驾车路线图
drawDrivingRute(array) {
for (var i = 0; i < array.length; i++) {
var form_loc = array[i].location.split(',');
var path = this.polyline.getPath(); //获取线条的坐标
path.push(new google.maps.LatLng(form_loc[0], form_loc[1])); //为线条添加标记坐标
this.addMarker(array[i], i+1);
}
},
addMarker(obj, title) {
var loc = obj.location.split(',');
//生成标记图标
var image = {}
var type = obj.type;
var isFly = obj.isFly;
//交通
if (type == 1) {
image = {
url: this.icons.trafficImage, // image is 512 x 512
scaledSize: new google.maps.Size(30, 40),
};
}
//住宿
if (type == 3) {
image = {
url: this.icons.hotelImage,
scaledSize: new google.maps.Size(40, 40),
}
}
//景点
if (type == 2) {
image = {
url: this.icons.scenicImage,
scaledSize: new google.maps.Size(35, 45),
}
}
//飞机
if (isFly == 1) {
image = {
url: this.icons.planeImage,
scaledSize: new google.maps.Size(30, 30),
}
}
let marker = new MarkerWithLabel({
position: new google.maps.LatLng(loc[0], loc[1]),
icon: image, //标记自定义图标
draggable: false, //不可拖动
map: this.map, //地图实例
labelContent: title, //label的内容
labelAnchor: new google.maps.Point(0, 0), //label的位置，可以调
labelClass: "labels", // the CSS class for the label
labelStyle: {
background: '#fff',
borderRadius: '50%',
marginLeft: '-10px',
marginTop: '-35px',
width: '19px',
height: '19px',
textAlign: 'center',
lineHeight: '20px'
}
});
//景点
if (type == 2) {
let infowindow = new google.maps.InfoWindow({
content: '<div>' + obj.name + '</div>',
size: new google.maps.Size(50, 50)
});
infowindow.open(this.map, marker);
marker.addListener('click', function () {
infowindow.close();
})
}
if (type == 3 || type == 2 || isFly == 1) {
marker.labelContent = ''
marker.labelStyle = 'background:transparent'
}
},
//步行路线请求内容
drawWalkRoute(from_g, to_g) {
var request = {
origin: from_g,
destination: to_g,
travelMode: google.maps.DirectionsTravelMode.WALKING,
provideRouteAlternatives: true,
transitOptions: {}
};
var _this = this;
this.directions.route(request, function (response, status) { //绘制路线
if (status == google.maps.DirectionsStatus.OK) {
_this.renderer.setDirections(response);
_this.renderer.setMap(_this.map);
_this.renderer.setOptions({
suppressMarkers: true
});
} else {
renderer.setMap(null);
}
});
}
},
}
......
src/components/mall/newTrip.vue
View file @ eb72c7a7
......@@ -682,9 +682,11 @@
margin: 5px 0 0 60px;
font-size: 16px;
}
.tripAgendaTransitBox .transitIcon i {
font-size:20px;
font-size: 20px;
}
.tripAgendaTransitBox .transitInfoTxt {
line-height: 34px;
position: relative;
......@@ -838,6 +840,7 @@
margin-bottom: 20px;
-webkit-box-orient: vertical;
}
.tripAgendaTransitBox .btnTransit {
border: 2px #00A4A8 solid;
color: #00A4A8;
......@@ -850,15 +853,17 @@
margin-right: 10px;
background: #fff;
}
.tripViewPop {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
background: rgba(0, 0, 0, .6);
z-index: 201;
position: fixed;
}
.tripViewPop .detailBox {
position: absolute;
top: 50%;
......@@ -874,10 +879,11 @@
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-box-shadow: 1px 1px 8px rgba(0,0,0,.16);
-moz-box-shadow: 1px 1px 8px rgba(0,0,0,.16);
box-shadow: 1px 1px 8px rgba(0,0,0,.16);
-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, .16);
-moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, .16);
box-shadow: 1px 1px 8px rgba(0, 0, 0, .16);
}
.tripViewPop .detailBox .btnClose {
position: absolute;
right: 20px;
......@@ -890,11 +896,12 @@
z-index: 2;
color: #fff;
border-radius: 40px;
-webkit-box-shadow: rgba(0,0,0,.2) 2px 2px 6px;
-moz-box-shadow: rgba(0,0,0,.2) 2px 2px 6px;
box-shadow: rgba(0,0,0,.2) 2px 2px 6px;
-webkit-box-shadow: rgba(0, 0, 0, .2) 2px 2px 6px;
-moz-box-shadow: rgba(0, 0, 0, .2) 2px 2px 6px;
box-shadow: rgba(0, 0, 0, .2) 2px 2px 6px;
background: #00A4A8;
}
.tripViewPop .detailBox .tripViewPopCont {
width: 100%;
min-height: 140px;
......@@ -1147,35 +1154,38 @@
</div>
</div>
</div>
<template v-if="subItem.childItem.trafficType==1">
<template v-if="subItem.childItem.trafficType==1">
<div class="tripAgendaTransitBox">
<div class="transitIcon">
<i class="iconfont icon-feiji2"></i>飞机
<i class="iconfont icon-feiji2"></i>飞机
</div>
</div>
</template>
<template v-if="subItem.childItem.trafficType==2">
<template v-if="subItem.childItem.trafficType==2">
<div class="tripAgendaTransitBox">
<div class="transitIcon">
<i class="iconfont icon-icon-" style="font-size:25px;"></i>专车
<i class="iconfont icon-icon-"
style="font-size:25px;"></i>专车
</div>
</div>
</template>
<template v-if="subItem.childItem.trafficType==3">
<template v-if="subItem.childItem.trafficType==3">
<div class="tripAgendaTransitBox">
<div class="btnTransit" @click="getSubWay(subItem.childItem.trafficImage)">
<i class="iconfont icon-subway" style="margin-right:10px;font-size:18px;"></i>查看交通详情
<div class="btnTransit"
@click="getSubWay(subItem.childItem.trafficImage)">
<i class="iconfont icon-subway"
style="margin-right:10px;font-size:18px;"></i>查看交通详情
</div>
<div class="transitIcon" style="margin-left:0;">
<span>地铁</span>
<span>地铁</span>
</div>
</div>
</template>
<template v-if="subItem.childItem.trafficType==4">
<template v-if="subItem.childItem.trafficType==4">
<div class="tripAgendaTransitBox">
<div class="transitIcon">
<i class="iconfont icon-walking"></i>
{{subItem.childItem.trafficContent}}
<i class="iconfont icon-walking"></i>
{{subItem.childItem.trafficContent}}
</div>
</div>
</template>
......@@ -1235,7 +1245,8 @@
</div>
</div>
<div class="showMore"
@click="getShowMore(subItem.childItem)">{{subItem.childItem.isShow==true?'点我收起':'点我展开详情'}}</div>
@click="getShowMore(subItem.childItem)">
{{subItem.childItem.isShow==true?'点我收起':'点我展开详情'}}</div>
</div>
<div class="Divtriangle">
<span></span>
......@@ -1252,7 +1263,7 @@
</div>
</div>
<div class="viewTripMap">
<tripMap :locationArray="travelLngLat" :type="1" ref="tripMap"></tripMap>
<tripMap :locationArray="travelLngLat" :type="showType" ref="tripMap"></tripMap>
</div>
<div class="tripViewPop" v-if="showSubwayDiv">
<div class="detailBox">
......@@ -1273,12 +1284,12 @@
</template>
<script>
import tripMap from '../global/tripMap'
// import HTMap from '../global/HTMap'
export default {
data() {
return {
defaultImg: 'this.src="' + require('../../assets/img/newtrip/hotel.jpg') + '"',
travelLngLat: [],
showType: 1, //显示类型(1-所有的，2-每天的)
//请求参数
msg: {
ID: 0,
......@@ -1296,8 +1307,8 @@
},
FlightList: [],
StartData: "",
showSubwayDiv:false,
subWaySrc:''
showSubwayDiv: false,
subWaySrc: ''
}
},
mounted() {
......@@ -1339,10 +1350,10 @@
this.apipost('b2b_get_GetB2BTravelInfoV1', this.msg, res => {
if (res.data.resultCode == 1) {
this.dataList = res.data.data;
console.log("this.dataList", this.dataList);
this.FlightList = res.data.data.currentPriceInfo.priceFlight;
this.StartData = res.data.data.currentPriceInfo.startDate;
this.isShow = true;
console.log(this.dataList,'dataList');
this.getAllPoint();
//装载景点酒店图片以供预览
this.images = [];
......@@ -1419,13 +1430,17 @@
lat: z.startCityPoint[1],
lng: z.startCityPoint[0],
name: z.startCityName,
type: 1
type: 1,
isFly: 0,
trafficType: 0,
}
let obj2 = {
lat: z.arrivalCityPoint[1],
lng: z.arrivalCityPoint[0],
name: z.arrivalCityName,
type: 1
type: 1,
isFly: 0,
trafficType: 0,
}
Arr.push(obj1);
Arr.push(obj2);
......@@ -1434,11 +1449,13 @@
})
});
this.travelLngLat = Arr;
this.showType = 1;
}
},
//加载当日坐标点
getDayPoint(dayNum) {
let Arr = [];
this.showType = 2;
if (this.dataList && this.dataList.dayList && this.dataList.dayList.length > 0) {
var startTrafficArray = [];
var arrivalTrafficArray = [];
......@@ -1455,13 +1472,17 @@
lat: z.startCityPoint[1],
lng: z.startCityPoint[0],
name: z.startCityName,
type: 1
type: 1,
trafficType: x.childItem.trafficIntroduce
.trafficType
}
let obj2 = {
lat: z.arrivalCityPoint[1],
lng: z.arrivalCityPoint[0],
name: z.arrivalCityName,
type: 1
type: 1,
trafficType: x.childItem.trafficIntroduce
.trafficType
}
startTrafficArray.push(obj1);
arrivalTrafficArray.push(obj2);
......@@ -1488,16 +1509,16 @@
}
}
}
})
console.log("dayNum", dayNum);
var newDayNum = dayNum - 1;
var newDate = this.addDate(this.StartData, newDayNum);
//第一天国内出发
if (dayNum == 1) {
if (this.FlightList && this.FlightList.length > 0) {
var trafficType = 0;
if (startTrafficArray && startTrafficArray.length > 0) {
trafficType = startTrafficArray[0].trafficType;
}
this.FlightList.forEach(subItem => {
if (subItem.startDate == newDate) {
Arr.push({
......@@ -1505,14 +1526,16 @@
lng: subItem.dLng,
name: subItem.departureAirPortName,
type: 1,
isFly:1
isFly: 1,
trafficType: trafficType
});
Arr.push({
lat: subItem.aLat,
lng: subItem.aLng,
name: subItem.arrivalAirPortName,
type: 1,
isFly:1
isFly: 1,
trafficType: trafficType
})
}
});
......@@ -1525,19 +1548,21 @@
//从酒店出发
else {
if (YesterdayHotelArray && YesterdayHotelArray.length > 0) {
YesterdayHotelArray.forEach(hItem=>{
Arr.push({
YesterdayHotelArray.forEach((hItem, hIndex) => {
if (hIndex == 0) {
Arr.push({
lat: hItem.lat,
lng: hItem.lng,
name: hItem.name,
type: 1
type: 1,
isFly: 0,
trafficType: 0,
})
}
});
}
//最后一天
if (dayNum == this.dataList.dayList[this.dataList.dayList.length - 1].dayNum) {
if (this.FlightList && this.FlightList.length > 0) {
this.FlightList.forEach(subItem => {
if (subItem.startDate == newDate) {
......@@ -1566,12 +1591,16 @@
if (scenicArray && scenicArray.length > 0) {
Arr.push(...scenicArray)
}
//只取第一个酒店
if (hotelArray && hotelArray.length > 0) {
Arr.push(...hotelArray)
hotelArray.forEach((hItem, hIndex) => {
if (hIndex == 0) {
Arr.push(hItem)
}
})
}
console.log('day加载' + dayNum, Arr);
this.travelLngLat = Arr;
console.log('day加载' + dayNum, this.travelLngLat);
}
},
getItemArray(item, type) {
......@@ -1586,7 +1615,8 @@
lat: x.childItem.pointArray[1],
lng: x.childItem.pointArray[0],
name: x.childItem.couponsName,
type: 2
type: 2,
trafficType: x.childItem.trafficType,
}
newArray.push(obj3);
}
......@@ -1597,7 +1627,8 @@
lat: x.childItem.pointArray[1],
lng: x.childItem.pointArray[0],
name: '',
type: 3
type: 3,
trafficType: 2
}
if (x.childItem.newHotelName && x.childItem.newHotelName != '') {
obj4.name = x.childItem.newHotelName;
......@@ -1647,9 +1678,9 @@
this.$forceUpdate();
},
//查看
getSubWay(url){
this.showSubwayDiv=true;
this.subWaySrc=url;
getSubWay(url) {
this.showSubwayDiv = true;
this.subWaySrc = url;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment