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> <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;
} }
.classDetail{
height:244px; .classDetail {
width:100% height: 244px;
width: 100%
} }
.ClassList{
width:100%; .ClassList {
height:380px; width: 100%;
height: 380px;
} }
</style> </style>
<template> <template>
<div > <div>
<div id="map_canvas" :class="type==2?'classDetail':'ClassList'"></div> <div id="map_canvas" :class="type==2?'classDetail':'ClassList'"></div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props:["dataList","type"], props: ["dataList", "type"],
data(){ data() {
return{ return {
show:false, show: false,
directionsService: new google.maps.DirectionsService(), directionsService: null,
directionsDisplay: new google.maps.DirectionsRenderer(), directionsDisplay: null,
map:{}, map: {},
} }
}, },
created(){ created() {
},
destroyed: function() {
}, },
mounted(){ destroyed: function () {
// this.mapBuild() //初始化实例之后调用
}, },
methods:{ created() {
getDetailsRoutes(source,destination,map){ // this.directionsService= new google.maps.DirectionsService(),
service = new google.maps.DistanceMatrixService(); // this.directionsDisplay= new google.maps.DirectionsRenderer(),
service.getDistanceMatrix({ },
origins: [source], mounted() {
destinations: [destination], // this.mapBuild() //初始化实例之后调用
travelMode: google.maps.TravelMode.DRIVING, },
unitSystem: google.maps.UnitSystem.METRIC, methods: {
avoidHighways: false, getDetailsRoutes(source, destination, map) {
avoidTolls: false service = new google.maps.DistanceMatrixService();
}, function (response, status) { service.getDistanceMatrix({
if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") { origins: [source],
var distance = response.rows[0].elements[0].distance.text; destinations: [destination],
var duration = response.rows[0].elements[0].duration.text; travelMode: google.maps.TravelMode.DRIVING,
var dvDistance = document.getElementById("siteinfo_modal_label"); unitSystem: google.maps.UnitSystem.METRIC,
dvDistance.innerHTML = ""; avoidHighways: false,
dvDistance.innerHTML += "Distance: " + distance + "<br />"; avoidTolls: false
dvDistance.innerHTML += "Duration:" + duration; }, function (response, status) {
} else { if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status !=
alert("Unable to find the distance via road."); "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 = "";
mapBuild(){ dvDistance.innerHTML += "Distance: " + distance + "<br />";
if(this.dataList.length>1){ 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是缩放比例
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) mapBuild() {
      } if (this.dataList.length > 1) {
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() { // 创建路径规划
// 分解数据 获得起 止 以及中间数据
let lat = parseFloat(this.dataList[0].lat) let lat = parseFloat(this.dataList[0].lat)
let lng = parseFloat(this.dataList[0].lng) let lng = parseFloat(this.dataList[0].lng)
let elat = parseFloat(this.dataList[this.dataList.length-1].lat) let center = {
let elng = parseFloat(this.dataList[this.dataList.length-1].lng) lng: lng,
let _this = this; lat: lat
let start = lat + ',' + lng; }
let end = elat + ',' + elng; //创建地图实例，zoom是缩放比例
let waypoints = []; this.map = new google.maps.Map(document.getElementById('map_canvas'), {
if (this.dataList.length > 2) { zoom: 7,
this.dataList.forEach((x, index) => { center: center,
if (index >= 1 && index !== (this.dataList.length-1)) { mapTypeId: google.maps.MapTypeId.ROADMAP,
let obj = { gestureHandling: 'greedy'
location: x.lat + ',' + x.lng });
} this.directionsDisplay.setMap(this.map);
waypoints.push(obj) this.calcRoute();
} } else {
}); this.ptcenter = {
lat: parseFloat(this.dataList[0].lat),
lng: parseFloat(this.dataList[0].lng)
} }
let request = { // 组装连线数据 this.ptstart = {
origin:start, // 起 lat: parseFloat(this.dataList[0].lat),
destination:end, // 止 lng: parseFloat(this.dataList[0].lng)
travelMode: google.maps.TravelMode.DRIVING,
};
if (waypoints.length > 0) {
request.waypoints = waypoints
} }
this.map = new google.maps.Map(document.getElementById('map_canvas'), {
_this.directionsService.route(request, function(result, status) { center: this.ptcenter,
if (status == google.maps.DirectionsStatus.OK) { zoom: 15,
_this.directionsDisplay.setDirections(result); 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)
} }
}); });
}, }
}, let request = { // 组装连线数据
} origin: start, // 起
</script> 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