Skip to content

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

页面修改

parent 6f465ab2
Hide whitespace changes
Inline Side-by-side
Showing with 166 additions and 150 deletions
src/components/global/tripMap.vue
View file @ e73a3e2f
<style>
.markers_labels {
margin-left: -24px !important;
margin-top: -43px !important;
}
.markers_labels {
margin-left: -24px !important;
margin-top: -43px !important;
}
.gm-svpc,
.gm-style-mtc,
.gm-style-cc {
display: none;
}
.gm-svpc,
.gm-style-mtc,
.gm-style-cc {
display: none;
}
</style>
<template>
<div style="height:100%;">
<div id="map_canvas" style="height: 100%; width: 100%"></div>
</div>
<div style="height:100%;">
<div id="map_canvas" style="height: 100%; width: 100%"></div>
</div>
</template>
<script>
export default {
props: ["locationArray"],
name: 'tripMap',
data() {
return {
show: false,
directionsService: new google.maps.DirectionsService(),
directionsDisplay: new google.maps.DirectionsRenderer(),
map: {},
}
},
watch: {
locationArray(newValue, old) {
this.mapBuild()
}
},
created() {
},
destroyed: function () {
},
mounted() {
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;
export default {
props: ["locationArray"],
name: 'tripMap',
data() {
return {
show: false,
directionsService: new google.maps.DirectionsService(),
directionsDisplay: new google.maps.DirectionsRenderer(),
map: {},
}
},
watch: {
locationArray(newValue, old) {
this.mapBuild()
}
},
created() {
} else {
alert("Unable to find the distance via road.");
}
})
},
// 地图实例
mapBuild() {
if (this.locationArray && this.locationArray.length > 0) {
},
destroyed: function () {
let lat = parseFloat(this.locationArray[0].lat)
let lng = parseFloat(this.locationArray[0].lng)
let center = {
lng: lng,
lat: lat
}
//创建地图实例，zoom是缩放比例
this.map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// var polyOptions = {
// strokeColor: 'red', // 颜色
// strokeOpacity: 1.0, // 透明度
// strokeWeight: 2 // 宽度
// }
// let poly = new google.maps.Polyline(polyOptions);
// poly.setMap(map); // 装载
// 遍历循环创建标记
// this.locationArray.map(item=>{
// // let lat = parseFloat(item.lat)
// // let lng = parseFloat(item.lng)
// // var path = poly.getPath(); //获取线条的坐标
// // path.push(new google.maps.LatLng(lat, lng));
// let marker = new MarkerWithLabel({
// position: {lat:lat,lng:lng},
// // icon: '../../../static/img/qishou.png', //标记自定义图标
// draggable: false, //不可拖动
// map: map, //地图实例
// // labelContent: item.name, //label的内容
// labelAnchor: new google.maps.Point(22, 100), //label的位置，可以调
// // labelClass: "markers_labels", // the CSS class for the label
// // labelStyle: { background:'#fff',padding:'5px' }
// });
// //自定义信息窗口
// let iw = new google.maps.InfoWindow({
// content: `<div>
// <p>景点名称：${item.name}</p>
// </div>`});
// //点击信息窗口显示
// google.maps.event.addListener(marker, "click", function (e) { iw.open(map, marker); });
// })
this.directionsDisplay.setMap(this.map);
this.calcRoute()
}
},
mounted() {
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;
},
calcRoute: function () { // 创建路径规划
// 分解数据 获得起 止 以及中间数据
console.log(this.locationArray, '加载后....');
let lat = parseFloat(this.locationArray[0].lat)
let lng = parseFloat(this.locationArray[0].lng)
let elat = parseFloat(this.locationArray[this.locationArray.length - 1].lat)
let elng = parseFloat(this.locationArray[this.locationArray.length - 1].lng)
let _this = this;
let start = lat + ',' + lng;
let end = elat + ',' + elng;
let waypoints = [];
if (this.locationArray.length > 2) {
this.locationArray.forEach((x, index) => {
if (index >= 1 && index !== (this.locationArray.length - 1)) {
let obj = {
location: x.lat + ',' + x.lng
}
waypoints.push(obj)
}
});
}
let request = { // 组装连线数据
origin: start, // 起
destination: end, // 止
travelMode: google.maps.TravelMode.DRIVING,
// waypoints: [{location:"30.5226477,104.05806469999993"},{location:"30.67416759999999,104.04721970000003"}] // 中间点数据
};
if (waypoints.length > 0) {
request.waypoints = waypoints
}
console.log(waypoints, 'waypointsss')
_this.directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
_this.directionsDisplay.setDirections(result);
}
});
},
},
}
} else {
alert("Unable to find the distance via road.");
}
})
},
// 地图实例
mapBuild() {
if (this.locationArray && this.locationArray.length > 0) {
let lat = parseFloat(this.locationArray[0].lat)
let lng = parseFloat(this.locationArray[0].lng)
let center = {
lng: lng,
lat: lat
}
//创建地图实例，zoom是缩放比例
this.map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// var polyOptions = {
// strokeColor: 'red', // 颜色
// strokeOpacity: 1.0, // 透明度
// strokeWeight: 2 // 宽度
// }
// let poly = new google.maps.Polyline(polyOptions);
// poly.setMap(map); // 装载
// 遍历循环创建标记
// this.locationArray.map(item=>{
// // let lat = parseFloat(item.lat)
// // let lng = parseFloat(item.lng)
// // var path = poly.getPath(); //获取线条的坐标
// // path.push(new google.maps.LatLng(lat, lng));
// let marker = new MarkerWithLabel({
// position: {lat:lat,lng:lng},
// // icon: '../../../static/img/qishou.png', //标记自定义图标
// draggable: false, //不可拖动
// map: map, //地图实例
// // labelContent: item.name, //label的内容
// labelAnchor: new google.maps.Point(22, 100), //label的位置，可以调
// // labelClass: "markers_labels", // the CSS class for the label
// // labelStyle: { background:'#fff',padding:'5px' }
// });
// //自定义信息窗口
// let iw = new google.maps.InfoWindow({
// content: `<div>
// <p>景点名称：${item.name}</p>
// </div>`});
// //点击信息窗口显示
// google.maps.event.addListener(marker, "click", function (e) { iw.open(map, marker); });
// })
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;
}
}
return isExists;
},
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
}
if (!_this.checkItemIsExists(waypoints, obj)) {
waypoints.push(obj);
}
}
});
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;
let request = { // 组装连线数据
origin: start, // 起
destination: end, // 止
travelMode: google.maps.TravelMode.DRIVING,
waypoints:[]
};
if (waypoints && waypoints.length > 0) {
if (waypoints.length > 2) {
waypoints.forEach((item, index) => {
if (index != 0 && index != waypoints.length - 1) {
request.waypoints.push(item);
}
})
}
}
console.log(request, 'request')
_this.directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
_this.directionsDisplay.setDirections(result);
}
});
}
},
},
}
</script>
\ No newline at end of file
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