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>
.markers_labels{
.markers_labels {
margin-left: -24px !important;
margin-top: -43px !important;
}
.gm-svpc,.gm-style-mtc,.gm-style-cc{
.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:["dataList"],
name: 'tripMap',
data(){
return{
show:false,
directionsService: new google.maps.DirectionsService(),
directionsDisplay: new google.maps.DirectionsRenderer(),
map:{},
}
},
watch:{
dataList(newValue,old){
this.mapBuild()
}
},
created(){
},
destroyed: function() {
export default {
props: ["dataList"],
name: 'tripMap',
data() {
return {
show: false,
directionsService: new google.maps.DirectionsService(),
directionsDisplay: new google.maps.DirectionsRenderer(),
map: {},
}
},
watch: {
dataList(newValue, old) {
this.mapBuild()
}
},
created() {
},
mounted(){
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;
},
destroyed: function () {
} else {
alert("Unable to find the distance via road.");
}
})
},
// 地图实例
mapBuild(){
let lat = parseFloat(this.dataList[0].lat)
let lng = parseFloat(this.dataList[0].lng)
},
mounted() {
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;
// let lat = parseFloat(this.dataList[0].lat)
// let lng = parseFloat(this.dataList[0].lng)
let center = {lng: lng, lat: lat}
//创建地图实例，zoom是缩放比例
} else {
alert("Unable to find the distance via road.");
}
})
},
// 地图实例
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'), {
zoom: 7,
center: center,
......@@ -85,7 +92,7 @@
// }
// let poly = new google.maps.Polyline(polyOptions);
// poly.setMap(map); // 装载
// 遍历循环创建标记
// 遍历循环创建标记
// this.dataList.map(item=>{
// // let lat = parseFloat(item.lat)
// // let lng = parseFloat(item.lng)
......@@ -111,45 +118,46 @@
// })
this.directionsDisplay.setMap(this.map);
this.calcRoute()
},
calcRoute: function() { // 创建路径规划
// 分解数据 获得起 止 以及中间数据
console.log(this.dataList,'加载后....');
let lat = parseFloat(this.dataList[0].lat)
let lng = parseFloat(this.dataList[0].lng)
let elat = parseFloat(this.dataList[this.dataList.length-1].lat)
let elng = parseFloat(this.dataList[this.dataList.length-1].lng)
let _this = this;
let start = lat + ',' + lng;
let end = elat + ',' + elng;
let waypoints = [];
if (this.dataList.length > 2) {
this.dataList.forEach((x, index) => {
if (index >= 1 && index !== (this.dataList.length-1)) {
let obj = {
location: x.lat + ',' + x.lng
}
waypoints.push(obj)
}
},
calcRoute: function () { // 创建路径规划
// 分解数据 获得起 止 以及中间数据
console.log(this.dataList, '加载后....');
let lat = parseFloat(this.dataList[0].lat)
let lng = parseFloat(this.dataList[0].lng)
let elat = parseFloat(this.dataList[this.dataList.length - 1].lat)
let elng = parseFloat(this.dataList[this.dataList.length - 1].lng)
let _this = this;
let start = lat + ',' + lng;
let end = elat + ',' + elng;
let waypoints = [];
if (this.dataList.length > 2) {
this.dataList.forEach((x, index) => {
if (index >= 1 && index !== (this.dataList.length - 1)) {
let obj = {
location: x.lat + ',' + x.lng
}
});
}
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);
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);
}
});
},
}
</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