页面修改

src/components/global/tripMap.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;
   }
 </style>
@@ -15,33 +18,33 @@
 </template>
 <script>
   export default {
-      props:["dataList"],
+    props: ["dataList"],
     name: 'tripMap',
-      data(){
-          return{
-            show:false,
+    data() {
+      return {
+        show: false,
         directionsService: new google.maps.DirectionsService(),
         directionsDisplay: new google.maps.DirectionsRenderer(),
-            map:{},
+        map: {},
       }
     },
-      watch:{
-          dataList(newValue,old){
+    watch: {
+      dataList(newValue, old) {
         this.mapBuild()
       }
     },
-      created(){
+    created() {
 
     },
-      destroyed: function() {
+    destroyed: function () {
 
     },
-      mounted(){
-        console.log(this.dataList,'datalist组件');
+    mounted() {
+      console.log(this.dataList, 'datalist组件');
       this.mapBuild() //初始化实例之后调用
     },
-      methods:{
-        getDetailsRoutes(source,destination,map){
+    methods: {
+      getDetailsRoutes(source, destination, map) {
         service = new google.maps.DistanceMatrixService();
         service.getDistanceMatrix({
           origins: [source],
@@ -51,7 +54,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,13 +69,16 @@
         })
       },
       //  地图实例
-        mapBuild(){
+      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}
+          let center = {
+            lng: lng,
+            lat: lat
+          }
           //创建地图实例，zoom是缩放比例
           this.map = new google.maps.Map(document.getElementById('map_canvas'), {
             zoom: 7,
@@ -111,21 +118,23 @@
           // })
           this.directionsDisplay.setMap(this.map);
           this.calcRoute()
+        }
+
       },
-        calcRoute: function() {   // 创建路径规划
+      calcRoute: function () { // 创建路径规划
         //  分解数据  获得起 止 以及中间数据
-          console.log(this.dataList,'加载后....');
+        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 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
               }
@@ -134,16 +143,16 @@
           });
         }
         let request = { // 组装连线数据
-            origin:start,  // 起
-            destination:end,  // 止
+          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) {
+        console.log(waypoints, 'waypointsss')
+        _this.directionsService.route(request, function (result, status) {
           if (status == google.maps.DirectionsStatus.OK) {
             _this.directionsDisplay.setDirections(result);
           }
@@ -152,4 +161,3 @@
     },
   }
 </script>
\ No newline at end of file
-