修改

src/App.vue

@@ -101,7 +101,7 @@ export default {
 
 <style>
 @import './assets/global/font.css';
-@import '//at.alicdn.com/t/font_863923_dtn4njci8up.css';
+@import '//at.alicdn.com/t/font_863923_gnvvvot7jvv.css';
 @import './assets/global/global.css';
 @import './assets/css/common.css';
 body,html{

src/components/global/tripMap.vue

+<style>
+  .markers_labels{
+    margin-left: -24px !important;
+    margin-top: -43px !important;
+  }
+  .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>
+</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() {
+
+      },
+      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;
+
+              } else {
+                  alert("Unable to find the distance via road.");
+              }
+          })
+        },
+        //  地图实例
+        mapBuild(){
+           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,
+            mapTypeId: google.maps.MapTypeId.ROADMAP
+          });
+          // var polyOptions = {
+          //     strokeColor: 'red',    // 颜色
+          //     strokeOpacity: 1.0,    // 透明度
+          //     strokeWeight: 2    // 宽度
+          // }
+          // let poly = new google.maps.Polyline(polyOptions);
+          // poly.setMap(map);    // 装载
+            // 遍历循环创建标记
+          // this.dataList.map(item=>{
+          //   // let lat = parseFloat(item.lat)
+          //   // let lng = parseFloat(item.lng)
+          //   // var path = poly.getPath();    //获取线条的坐标
+          //   // path.push(new google.maps.LatLng(lat, lng));
+          //   let marker = new MarkerWithLabel({
+          //     position: {lat:lat,lng:lng},
+          //     // icon: '../../../static/img/qishou.png', //标记自定义图标
+          //     draggable: false, //不可拖动
+          //     map: map,   //地图实例 
+          //     // labelContent: item.name,    //label的内容
+          //     labelAnchor: new google.maps.Point(22, 100),    //label的位置，可以调
+          //     // labelClass: "markers_labels", // the CSS class for the label
+          //     // labelStyle: { background:'#fff',padding:'5px' }
+          //   });
+          //   //自定义信息窗口
+          //   let iw = new google.maps.InfoWindow({
+          //     content: `<div>
+          //                 <p>景点名称：${item.name}</p>
+          //               </div>`});
+          //   //点击信息窗口显示
+          //   google.maps.event.addListener(marker, "click", function (e) { iw.open(map, marker); });
+          // })
+          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)
+              }
+            });
+          }
+          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>
+