Skip to content

A
Athena
Commit 7615a005 authored by zhengke's avatar zhengke
Browse files
Options

页面修改

parent da117cd2
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 217 additions and 210 deletions
src/components/global/tripMap.vue
View file @ 7615a005
<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-style-mtc,.gm-style-cc{
.gm-svpc,
.gm-style-mtc,
.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:["dataList"], props: ["dataList"],
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: {
dataList(newValue,old){ dataList(newValue, old) {
this.mapBuild() this.mapBuild()
} }
}, },
created(){ created() {
},
destroyed: function() {
}, },
mounted(){ destroyed: function () {
console.log(this.dataList,'datalist组件');
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."); mounted() {
} console.log(this.dataList, 'datalist组件');
}) this.mapBuild() //初始化实例之后调用
}, },
// 地图实例 methods: {
mapBuild(){ getDetailsRoutes(source, destination, map) {
let lat = parseFloat(this.dataList[0].lat) service = new google.maps.DistanceMatrixService();
let lng = parseFloat(this.dataList[0].lng) 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;
// let lat = parseFloat(this.dataList[0].lat) } else {
// let lng = parseFloat(this.dataList[0].lng) alert("Unable to find the distance via road.");
let center = {lng: lng, lat: lat} }
//创建地图实例，zoom是缩放比例 })
},
// 地图实例
mapBuild() {
if (this.dataList && this.dataList.length > 0) {
let lat = parseFloat(this.dataList[0].lat)
let lng = parseFloat(this.dataList[0].lng)
// let lat = parseFloat(this.dataList[0].lat)
// let lng = parseFloat(this.dataList[0].lng)
let center = {
lng: lng,
lat: lat
}
//创建地图实例，zoom是缩放比例
this.map = new google.maps.Map(document.getElementById('map_canvas'), { this.map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7, zoom: 7,
center: center, center: center,
...@@ -85,7 +92,7 @@ ...@@ -85,7 +92,7 @@
// } // }
// let poly = new google.maps.Polyline(polyOptions); // let poly = new google.maps.Polyline(polyOptions);
// poly.setMap(map); // 装载 // poly.setMap(map); // 装载
// 遍历循环创建标记 // 遍历循环创建标记
// this.dataList.map(item=>{ // this.dataList.map(item=>{
// // let lat = parseFloat(item.lat) // // let lat = parseFloat(item.lat)
// // let lng = parseFloat(item.lng) // // let lng = parseFloat(item.lng)
...@@ -111,45 +118,46 @@ ...@@ -111,45 +118,46 @@
// }) // })
this.directionsDisplay.setMap(this.map); this.directionsDisplay.setMap(this.map);
this.calcRoute() this.calcRoute()
}, }
calcRoute: function() { // 创建路径规划
// 分解数据 获得起 止 以及中间数据 },
console.log(this.dataList,'加载后....'); calcRoute: function () { // 创建路径规划
let lat = parseFloat(this.dataList[0].lat) // 分解数据 获得起 止 以及中间数据
let lng = parseFloat(this.dataList[0].lng) console.log(this.dataList, '加载后....');
let elat = parseFloat(this.dataList[this.dataList.length-1].lat) let lat = parseFloat(this.dataList[0].lat)
let elng = parseFloat(this.dataList[this.dataList.length-1].lng) let lng = parseFloat(this.dataList[0].lng)
let _this = this; let elat = parseFloat(this.dataList[this.dataList.length - 1].lat)
let start = lat + ',' + lng; let elng = parseFloat(this.dataList[this.dataList.length - 1].lng)
let end = elat + ',' + elng; let _this = this;
let waypoints = []; let start = lat + ',' + lng;
if (this.dataList.length > 2) { let end = elat + ',' + elng;
this.dataList.forEach((x, index) => { let waypoints = [];
if (index >= 1 && index !== (this.dataList.length-1)) { if (this.dataList.length > 2) {
let obj = { this.dataList.forEach((x, index) => {
location: x.lat + ',' + x.lng if (index >= 1 && index !== (this.dataList.length - 1)) {
} let obj = {
waypoints.push(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);
} }
}); });
}, }
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);
}
});
}, },
} },
</script> }
</script>
\ No newline at end of file
src/components/mall/newTrip.vue
View file @ 7615a005
This diff is collapsed.
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