Skip to content

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

页面修改

parent 82dfa03a
Hide whitespace changes
Inline Side-by-side
Showing with 74 additions and 80 deletions
src/components/global/tripMap.vue
View file @ 6a182e1c
......@@ -9,20 +9,22 @@
.gm-style-cc {
display: none;
}
.classA{
background-size: 700px 1600px;
background-position: 0px -1200px;
width: 34px;
height: 34px;
position: absolute;
left: -16px;
top: -16px;
.classA {
background-size: 700px 1600px;
background-position: 0px -1200px;
width: 34px;
height: 34px;
position: absolute;
left: -16px;
top: -16px;
}
.labels{
width:30px;
height:30px;
position: relative;
bottom:-200px;
.labels {
width: 30px;
height: 30px;
position: relative;
bottom: -200px;
}
</style>
......@@ -37,8 +39,6 @@
name: 'tripMap',
data() {
return {
show: false,
directionsService: new google.maps.DirectionsService(),
directionsDisplay: new google.maps.DirectionsRenderer(),
map: {},
}
......@@ -58,31 +58,7 @@
this.mapBuild() //初始化实例之后调用
},
methods: {
getDetailsRoutes(source, destination, map) {
service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [source],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, function (response, status) {
if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status !=
"ZERO_RESULTS") {
var distance = response.rows[0].elements[0].distance.text;
var duration = response.rows[0].elements[0].duration.text;
var dvDistance = document.getElementById("siteinfo_modal_label");
dvDistance.innerHTML = "";
dvDistance.innerHTML += "Distance: " + distance + "<br />";
dvDistance.innerHTML += "Duration:" + duration;
} else {
alert("Unable to find the distance via road.");
}
})
},
// 地图实例
// 地图实例
mapBuild() {
if (this.locationArray && this.locationArray.length > 0) {
let lat = parseFloat(this.locationArray[0].lat)
......@@ -111,16 +87,19 @@
}
return isExists;
},
calcRoute: function () { // 创建路径规划
// 创建路径规划
calcRoute: function () {
// 分解数据 获得起 止 以及中间数据
if (this.locationArray && this.locationArray.length > 0) {
let _this = this;
let waypoints = [];
//去掉重复的数据
this.locationArray.forEach((x, index) => {
if (x.lat && x.lng) {
let obj = {
location: x.lat + ',' + x.lng,
type: x.type
type: x.type,
name: x.name
}
if (!_this.checkItemIsExists(waypoints, obj)) {
waypoints.push(obj);
......@@ -128,13 +107,8 @@
}
});
var startArray = waypoints[0].location.split(',');
var endArray = waypoints[waypoints.length - 1].location.split(',');
let lat = parseFloat(startArray[0]);
let lng = parseFloat(startArray[1]);
let elat = parseFloat(endArray[0]);
let elng = parseFloat(endArray[1]);
let start = lat + ',' + lng;
let end = elat + ',' + elng;
// 线条设置
var polyOptions = {
strokeColor: '#000000', // 颜色
......@@ -143,60 +117,72 @@
}
var poly = new google.maps.Polyline(polyOptions);
poly.setMap(_this.map); // 装载
_this.map.setCenter(new google.maps.LatLng(lat,lng));
_this.map.setCenter(new google.maps.LatLng(lat, lng));
_this.map.setZoom(9);
console.log(waypoints,'waypoints');
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 marker = new google.maps.Marker({
// position: new google.maps.LatLng(loc[0], loc[1]),
// map: _this.map,
// icon: '../../assets/img/active/x1.png'
// // labelClass:"classA"
// });
var image={}
var type=waypoints[i].type;
var image = {}
var type = waypoints[i].type;
//交通
if(type==1){
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),
};
scaledSize: new google.maps.Size(30, 40),
};
}
//住宿
if(type==3){
if (type == 3) {
image = {
url: 'http://imgfile.oytour.com/static/location_hotel.png',
scaledSize: new google.maps.Size(40, 40),
scaledSize: new google.maps.Size(40, 40),
}
}
//景点
if(type==2){
if (type == 2) {
image = {
url: 'http://imgfile.oytour.com/static/location_scenic.png',
scaledSize: new google.maps.Size(35, 45),
scaledSize: new google.maps.Size(35, 45),
}
}
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的位置，可以调
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' }
labelStyle: {
background: '#fff',
borderRadius: '50%',
marginLeft: '-10px',
marginTop: '-35px',
width: '19px',
height: '19px',
textAlign: 'center',
lineHeight: '20px'
}
});
let infowindow = new google.maps.InfoWindow({
content: '<div>' + waypoints[i].name + '</div>',
size: new google.maps.Size(50, 50)
});
if(type==3||type==2){
marker.labelContent=''
marker.labelStyle='background:transparent'
infowindow.open(_this.map, marker);
marker.addListener('click', function () {
infowindow.close();
})
if (type == 3 || type == 2) {
marker.labelContent = ''
marker.labelStyle = 'background:transparent'
}
}
}
......
src/components/mall/newTrip.vue
View file @ 6a182e1c
......@@ -1159,7 +1159,7 @@
this.apipost('b2b_get_GetB2BTravelInfoV1', this.msg, res => {
if (res.data.resultCode == 1) {
this.dataList = res.data.data;
console.log("this.dataList", this.dataList);
console.log("dayList", this.dataList.dayList);
this.isShow = true;
this.getAllPoint();
} else {
......@@ -1199,13 +1199,13 @@
let obj1 = {
lat: z.startCityPoint[1],
lng: z.startCityPoint[0],
name: z.arrivalCityName,
name: z.startCityName,
type: 1
}
let obj2 = {
lat: z.arrivalCityPoint[1],
lng: z.arrivalCityPoint[0],
name: z.startCityName,
name: z.arrivalCityName,
type: 1
}
Arr.push(obj1);
......@@ -1229,13 +1229,13 @@
let obj1 = {
lat: z.startCityPoint[1],
lng: z.startCityPoint[0],
name: z.arrivalCityName,
name: z.startCityName,
type: 1
}
let obj2 = {
lat: z.arrivalCityPoint[1],
lng: z.arrivalCityPoint[0],
name: z.startCityName,
name: z.arrivalCityName,
type: 1
}
Arr.push(obj1);
......@@ -1261,9 +1261,17 @@
let obj4 = {
lat: x.childItem.pointArray[1],
lng: x.childItem.pointArray[0],
name: x.childItem.newHotelName,
name:'',
type: 3
}
if(x.childItem.newHotelName&&x.childItem.newHotelName!='')
{
obj4.name= x.childItem.newHotelName;
}
else
{
obj4.name= x.childItem.hotelName;
}
Arr.push(obj4);
}
})
......
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