Commit 78e6d257 authored by zhengke's avatar zhengke
parents 9ab38525 6a182e1c
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
.gm-style-cc { .gm-style-cc {
display: none; display: none;
} }
.classA{
.classA {
background-size: 700px 1600px; background-size: 700px 1600px;
background-position: 0px -1200px; background-position: 0px -1200px;
width: 34px; width: 34px;
...@@ -18,11 +19,12 @@ ...@@ -18,11 +19,12 @@
left: -16px; left: -16px;
top: -16px; top: -16px;
} }
.labels{
width:30px; .labels {
height:30px; width: 30px;
height: 30px;
position: relative; position: relative;
bottom:-200px; bottom: -200px;
} }
</style> </style>
...@@ -37,8 +39,6 @@ ...@@ -37,8 +39,6 @@
name: 'tripMap', name: 'tripMap',
data() { data() {
return { return {
show: false,
directionsService: new google.maps.DirectionsService(),
directionsDisplay: new google.maps.DirectionsRenderer(), directionsDisplay: new google.maps.DirectionsRenderer(),
map: {}, map: {},
} }
...@@ -58,30 +58,6 @@ ...@@ -58,30 +58,6 @@
this.mapBuild() //初始化实例之后调用 this.mapBuild() //初始化实例之后调用
}, },
methods: { 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() { mapBuild() {
if (this.locationArray && this.locationArray.length > 0) { if (this.locationArray && this.locationArray.length > 0) {
...@@ -111,16 +87,19 @@ ...@@ -111,16 +87,19 @@
} }
return isExists; return isExists;
}, },
calcRoute: function () { // 创建路径规划 // 创建路径规划
calcRoute: function () {
// 分解数据 获得起 止 以及中间数据 // 分解数据 获得起 止 以及中间数据
if (this.locationArray && this.locationArray.length > 0) { if (this.locationArray && this.locationArray.length > 0) {
let _this = this; let _this = this;
let waypoints = []; let waypoints = [];
//去掉重复的数据
this.locationArray.forEach((x, index) => { this.locationArray.forEach((x, index) => {
if (x.lat && x.lng) { if (x.lat && x.lng) {
let obj = { let obj = {
location: x.lat + ',' + x.lng, location: x.lat + ',' + x.lng,
type: x.type type: x.type,
name: x.name
} }
if (!_this.checkItemIsExists(waypoints, obj)) { if (!_this.checkItemIsExists(waypoints, obj)) {
waypoints.push(obj); waypoints.push(obj);
...@@ -128,13 +107,8 @@ ...@@ -128,13 +107,8 @@
} }
}); });
var startArray = waypoints[0].location.split(','); var startArray = waypoints[0].location.split(',');
var endArray = waypoints[waypoints.length - 1].location.split(',');
let lat = parseFloat(startArray[0]); let lat = parseFloat(startArray[0]);
let lng = parseFloat(startArray[1]); 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 = { var polyOptions = {
strokeColor: '#000000', // 颜色 strokeColor: '#000000', // 颜色
...@@ -143,58 +117,72 @@ ...@@ -143,58 +117,72 @@
} }
var poly = new google.maps.Polyline(polyOptions); var poly = new google.maps.Polyline(polyOptions);
poly.setMap(_this.map); // 装载 poly.setMap(_this.map); // 装载
_this.map.setCenter(new google.maps.LatLng(lat, lng));
console.log(waypoints,'waypoints'); _this.map.setZoom(9);
console.log(waypoints, 'waypoints');
/* 循环标出所有坐标 */ /* 循环标出所有坐标 */
for (var i = 0; i < waypoints.length; i++) { for (var i = 0; i < waypoints.length; i++) {
var loc = waypoints[i].location.split(','); var loc = waypoints[i].location.split(',');
var path = poly.getPath(); //获取线条的坐标 var path = poly.getPath(); //获取线条的坐标
path.push(new google.maps.LatLng(loc[0], loc[1])); //为线条添加标记坐标 path.push(new google.maps.LatLng(loc[0], loc[1])); //为线条添加标记坐标
//生成标记图标 //生成标记图标
var image = {}
// var marker = new google.maps.Marker({ var type = waypoints[i].type;
// 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;
//交通 //交通
if(type==1){ if (type == 1) {
image = { image = {
url: 'http://imgfile.oytour.com/static/location_01.png', // image is 512 x 512 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 = { image = {
url: 'http://imgfile.oytour.com/static/location_hotel.png', 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 = { image = {
url: 'http://imgfile.oytour.com/static/location_scenic.png', 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({ let marker = new MarkerWithLabel({
position: new google.maps.LatLng(loc[0], loc[1]), position: new google.maps.LatLng(loc[0], loc[1]),
icon: image, //标记自定义图标 icon: image, //标记自定义图标
draggable: false, //不可拖动 draggable: false, //不可拖动
map: _this.map, //地图实例 map: _this.map, //地图实例
labelContent: i+1, //label的内容 labelContent: i + 1, //label的内容
labelAnchor: new google.maps.Point(0, 0), //label的位置,可以调 labelAnchor: new google.maps.Point(0, 0), //label的位置,可以调
labelClass: "labels", // the CSS class for the 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='' infowindow.open(_this.map, marker);
marker.labelStyle='background:transparent' marker.addListener('click', function () {
infowindow.close();
})
if (type == 3 || type == 2) {
marker.labelContent = ''
marker.labelStyle = 'background:transparent'
} }
} }
} }
......
...@@ -1176,7 +1176,7 @@ ...@@ -1176,7 +1176,7 @@
this.apipost('b2b_get_GetB2BTravelInfoV1', this.msg, res => { this.apipost('b2b_get_GetB2BTravelInfoV1', this.msg, res => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.dataList = res.data.data; this.dataList = res.data.data;
console.log("this.dataList", this.dataList); console.log("dayList", this.dataList.dayList);
this.isShow = true; this.isShow = true;
this.getAllPoint(); this.getAllPoint();
} else { } else {
...@@ -1216,13 +1216,13 @@ ...@@ -1216,13 +1216,13 @@
let obj1 = { let obj1 = {
lat: z.startCityPoint[1], lat: z.startCityPoint[1],
lng: z.startCityPoint[0], lng: z.startCityPoint[0],
name: z.arrivalCityName, name: z.startCityName,
type: 1 type: 1
} }
let obj2 = { let obj2 = {
lat: z.arrivalCityPoint[1], lat: z.arrivalCityPoint[1],
lng: z.arrivalCityPoint[0], lng: z.arrivalCityPoint[0],
name: z.startCityName, name: z.arrivalCityName,
type: 1 type: 1
} }
Arr.push(obj1); Arr.push(obj1);
...@@ -1246,13 +1246,13 @@ ...@@ -1246,13 +1246,13 @@
let obj1 = { let obj1 = {
lat: z.startCityPoint[1], lat: z.startCityPoint[1],
lng: z.startCityPoint[0], lng: z.startCityPoint[0],
name: z.arrivalCityName, name: z.startCityName,
type: 1 type: 1
} }
let obj2 = { let obj2 = {
lat: z.arrivalCityPoint[1], lat: z.arrivalCityPoint[1],
lng: z.arrivalCityPoint[0], lng: z.arrivalCityPoint[0],
name: z.startCityName, name: z.arrivalCityName,
type: 1 type: 1
} }
Arr.push(obj1); Arr.push(obj1);
...@@ -1278,9 +1278,17 @@ ...@@ -1278,9 +1278,17 @@
let obj4 = { let obj4 = {
lat: x.childItem.pointArray[1], lat: x.childItem.pointArray[1],
lng: x.childItem.pointArray[0], lng: x.childItem.pointArray[0],
name: x.childItem.newHotelName, name:'',
type: 3 type: 3
} }
if(x.childItem.newHotelName&&x.childItem.newHotelName!='')
{
obj4.name= x.childItem.newHotelName;
}
else
{
obj4.name= x.childItem.hotelName;
}
Arr.push(obj4); 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