Skip to content

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

页面修改

parent 5fd01be8
Hide whitespace changes
Inline Side-by-side
Showing with 131 additions and 120 deletions
src/components/global/HTMap.vue
View file @ 467926a8
<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;
}
.classDetail{
height:244px;
width:100%
.classDetail {
height: 244px;
width: 100%
}
.ClassList{
width:100%;
height:380px;
.ClassList {
width: 100%;
height: 380px;
}
</style>
<template>
<div >
<div id="map_canvas" :class="type==2?'classDetail':'ClassList'"></div>
</div>
<div>
<div id="map_canvas" :class="type==2?'classDetail':'ClassList'"></div>
</div>
</template>
<script>
export default {
props:["dataList","type"],
data(){
return{
show:false,
directionsService: new google.maps.DirectionsService(),
directionsDisplay: new google.maps.DirectionsRenderer(),
map:{},
}
},
created(){
},
destroyed: function() {
export default {
props: ["dataList", "type"],
data() {
return {
show: false,
directionsService: null,
directionsDisplay: null,
map: {},
}
},
created() {
},
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.");
}
})
},
// 地图实例
mapBuild(){
if(this.dataList.length>1){
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,
mapTypeId: google.maps.MapTypeId.ROADMAP,
gestureHandling: 'greedy'
});
this.directionsDisplay.setMap(this.map);
this.calcRoute();
},
destroyed: function () {
},
created() {
// this.directionsService= new google.maps.DirectionsService(),
// this.directionsDisplay= new google.maps.DirectionsRenderer(),
},
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.");
}
else{
this.ptcenter = {
        lat: parseFloat(this.dataList[0].lat),
        lng: parseFloat(this.dataList[0].lng)
      }
this.ptstart = {
lat: parseFloat(this.dataList[0].lat),
        lng: parseFloat(this.dataList[0].lng)
}
      this.map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: this.ptcenter,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
gestureHandling: 'greedy'
      })
var markerStart = new google.maps.Marker({
position: this.ptstart
})
markerStart.setMap(this.map)
}
},
calcRoute: function() { // 创建路径规划
// 分解数据 获得起 止 以及中间数据
})
},
// 地图实例
mapBuild() {
if (this.dataList.length > 1) {
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)
}
});
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,
gestureHandling: 'greedy'
});
this.directionsDisplay.setMap(this.map);
this.calcRoute();
} else {
this.ptcenter = {
lat: parseFloat(this.dataList[0].lat),
lng: parseFloat(this.dataList[0].lng)
}
let request = { // 组装连线数据
origin:start, // 起
destination:end, // 止
travelMode: google.maps.TravelMode.DRIVING,
};
if (waypoints.length > 0) {
request.waypoints = waypoints
this.ptstart = {
lat: parseFloat(this.dataList[0].lat),
lng: parseFloat(this.dataList[0].lng)
}
_this.directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
_this.directionsDisplay.setDirections(result);
this.map = new google.maps.Map(document.getElementById('map_canvas'), {
center: this.ptcenter,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
gestureHandling: 'greedy'
})
var markerStart = new google.maps.Marker({
position: this.ptstart
})
markerStart.setMap(this.map)
}
},
calcRoute: function () { // 创建路径规划
// 分解数据 获得起 止 以及中间数据
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)
}
});
},
},
}
</script>
}
let request = { // 组装连线数据
origin: start, // 起
destination: end, // 止
travelMode: google.maps.TravelMode.DRIVING,
};
if (waypoints.length > 0) {
request.waypoints = waypoints
}
_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