页面修改

src/components/global/HTMap.vue

 <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>
     <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:{},
+    props: ["dataList", "type"],
+    data() {
+      return {
+        show: false,
+        directionsService: null,
+        directionsDisplay: null,
+        map: {},
       }
     },
-      created(){
+    created() {
 
     },
-      destroyed: function() {
+    destroyed: function () {
 
     },
-      mounted(){
+    created() {
+      // this.directionsService= new google.maps.DirectionsService(),
+      // this.directionsDisplay= new google.maps.DirectionsRenderer(),
+    },
+    mounted() {
       // this.mapBuild() //初始化实例之后调用
     },
-      methods:{
-        getDetailsRoutes(source,destination,map){
+    methods: {
+      getDetailsRoutes(source, destination, map) {
         service = new google.maps.DistanceMatrixService();
         service.getDistanceMatrix({
           origins: [source],
@@ -52,7 +61,8 @@
           avoidHighways: false,
           avoidTolls: false
         }, function (response, status) {
-              if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
+          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");
@@ -65,11 +75,14 @@
         })
       },
       //  地图实例
-        mapBuild(){
-          if(this.dataList.length>1){
+      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}
+          let center = {
+            lng: lng,
+            lat: lat
+          }
           //创建地图实例，zoom是缩放比例
           this.map = new google.maps.Map(document.getElementById('map_canvas'), {
             zoom: 7,
@@ -79,41 +92,40 @@
           });
           this.directionsDisplay.setMap(this.map);
           this.calcRoute();
-          }
-          else{
+        } else {
           this.ptcenter = {
-              lat: parseFloat(this.dataList[0].lat),
-              lng: parseFloat(this.dataList[0].lng)
-            }
+            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)
+            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,
+          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() {   // 创建路径规划
+      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 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)) {
+            if (index >= 1 && index !== (this.dataList.length - 1)) {
               let obj = {
                 location: x.lat + ',' + x.lng
               }
@@ -122,15 +134,15 @@
           });
         }
         let request = { // 组装连线数据
-            origin:start,  // 起
-            destination:end,  // 止
+          origin: start, // 起
+          destination: end, // 止
           travelMode: google.maps.TravelMode.DRIVING,
         };
         if (waypoints.length > 0) {
           request.waypoints = waypoints
         }
 
-          _this.directionsService.route(request, function(result, status) {
+        _this.directionsService.route(request, function (result, status) {
           if (status == google.maps.DirectionsStatus.OK) {
             _this.directionsDisplay.setDirections(result);
           }
@@ -139,4 +151,3 @@
     },
   }
 </script>
\ No newline at end of file
-