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> <style>
.markers_labels { .markers_labels {
margin-left: -24px !important; margin-left: -24px !important;
margin-top: -43px !important; margin-top: -43px !important;
} }
.gm-svpc, .gm-svpc,
.gm-style-mtc, .gm-style-mtc,
.gm-style-cc { .gm-style-cc {
display: none; display: none;
} }
</style> </style>
<template> <template>
<div style="height:100%;"> <div style="height:100%;">
<div id="map_canvas" style="height: 100%; width: 100%"></div> <div id="map_canvas" style="height: 100%; width: 100%"></div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: ["locationArray"], props: ["locationArray"],
name: 'tripMap', name: 'tripMap',
data() { data() {
return { return {
show: false, show: false,
directionsService: new google.maps.DirectionsService(), directionsService: new google.maps.DirectionsService(),
directionsDisplay: new google.maps.DirectionsRenderer(), directionsDisplay: new google.maps.DirectionsRenderer(),
map: {}, map: {},
} }
}, },
watch: { watch: {
locationArray(newValue, old) { locationArray(newValue, old) {
this.mapBuild() this.mapBuild()
} }
}, },
created() { 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;
} else { },
alert("Unable to find the distance via road."); destroyed: function () {
}
})
},
// 地图实例
mapBuild() {
if (this.locationArray && this.locationArray.length > 0) {
let lat = parseFloat(this.locationArray[0].lat) },
let lng = parseFloat(this.locationArray[0].lng) mounted() {
let center = { this.mapBuild() //初始化实例之后调用
lng: lng, },
lat: lat methods: {
} getDetailsRoutes(source, destination, map) {
//创建地图实例，zoom是缩放比例 service = new google.maps.DistanceMatrixService();
this.map = new google.maps.Map(document.getElementById('map_canvas'), { service.getDistanceMatrix({
zoom: 7, origins: [source],
center: center, destinations: [destination],
mapTypeId: google.maps.MapTypeId.ROADMAP travelMode: google.maps.TravelMode.DRIVING,
}); unitSystem: google.maps.UnitSystem.METRIC,
// var polyOptions = { avoidHighways: false,
// strokeColor: 'red', // 颜色 avoidTolls: false
// strokeOpacity: 1.0, // 透明度 }, function (response, status) {
// strokeWeight: 2 // 宽度 if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status !=
// } "ZERO_RESULTS") {
// let poly = new google.maps.Polyline(polyOptions); var distance = response.rows[0].elements[0].distance.text;
// poly.setMap(map); // 装载 var duration = response.rows[0].elements[0].duration.text;
// 遍历循环创建标记 var dvDistance = document.getElementById("siteinfo_modal_label");
// this.locationArray.map(item=>{ dvDistance.innerHTML = "";
// // let lat = parseFloat(item.lat) dvDistance.innerHTML += "Distance: " + distance + "<br />";
// // let lng = parseFloat(item.lng) dvDistance.innerHTML += "Duration:" + duration;
// // 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()
}
}, } else {
calcRoute: function () { // 创建路径规划 alert("Unable to find the distance via road.");
// 分解数据 获得起 止 以及中间数据 }
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) mapBuild() {
let elng = parseFloat(this.locationArray[this.locationArray.length - 1].lng) if (this.locationArray && this.locationArray.length > 0) {
let _this = this; let lat = parseFloat(this.locationArray[0].lat)
let start = lat + ',' + lng; let lng = parseFloat(this.locationArray[0].lng)
let end = elat + ',' + elng; let center = {
let waypoints = []; lng: lng,
if (this.locationArray.length > 2) { lat: lat
this.locationArray.forEach((x, index) => { }
if (index >= 1 && index !== (this.locationArray.length - 1)) { //创建地图实例，zoom是缩放比例
let obj = { this.map = new google.maps.Map(document.getElementById('map_canvas'), {
location: x.lat + ',' + x.lng zoom: 7,
} center: center,
waypoints.push(obj) mapTypeId: google.maps.MapTypeId.ROADMAP
} });
}); // var polyOptions = {
} // strokeColor: 'red', // 颜色
let request = { // 组装连线数据 // strokeOpacity: 1.0, // 透明度
origin: start, // 起 // strokeWeight: 2 // 宽度
destination: end, // 止 // }
travelMode: google.maps.TravelMode.DRIVING, // let poly = new google.maps.Polyline(polyOptions);
// waypoints: [{location:"30.5226477,104.05806469999993"},{location:"30.67416759999999,104.04721970000003"}] // 中间点数据 // poly.setMap(map); // 装载
}; // 遍历循环创建标记
if (waypoints.length > 0) { // this.locationArray.map(item=>{
request.waypoints = waypoints // // let lat = parseFloat(item.lat)
} // // let lng = parseFloat(item.lng)
console.log(waypoints, 'waypointsss') // // var path = poly.getPath(); //获取线条的坐标
_this.directionsService.route(request, function (result, status) { // // path.push(new google.maps.LatLng(lat, lng));
if (status == google.maps.DirectionsStatus.OK) { // let marker = new MarkerWithLabel({
_this.directionsDisplay.setDirections(result); // 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> </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