修改

src/components/global/tripMap.vue

@@ -9,6 +9,21 @@
     .gm-style-cc {
         display: none;
     }
+    .classA{
+      background-size: 700px 1600px;
+      background-position: 0px -1200px;
+      width: 34px;
+      height: 34px;
+      position: absolute;
+      left: -16px;
+      top: -16px;
+    }
+    .labels{
+      width:30px;
+      height:30px;
+      position: relative;
+      bottom:-200px;
+    }
 </style>
 
 <template>
@@ -80,7 +95,8 @@
                     this.map = new google.maps.Map(document.getElementById('map_canvas'), {
                         zoom: 7,
                         center: center,
-                        mapTypeId: google.maps.MapTypeId.ROADMAP
+                        mapTypeId: google.maps.MapTypeId.ROADMAP,
+                        gestureHandling: 'greedy'
                     });
                     this.directionsDisplay.setMap(this.map);
                     this.calcRoute()
@@ -103,7 +119,8 @@
                     this.locationArray.forEach((x, index) => {
                         if (x.lat && x.lng) {
                             let obj = {
-                                location: x.lat + ',' + x.lng
+                                location: x.lat + ',' + x.lng,
+                                tyle: x.type
                             }
                             if (!_this.checkItemIsExists(waypoints, obj)) {
                                 waypoints.push(obj);
@@ -127,6 +144,7 @@
                     var poly = new google.maps.Polyline(polyOptions);
                     poly.setMap(_this.map); // 装载
 
+                    console.log(waypoints,'waypoints');
                     /* 循环标出所有坐标 */
                     for (var i = 0; i < waypoints.length; i++) {
                         var loc = waypoints[i].location.split(',');
@@ -134,13 +152,40 @@
                         var path = poly.getPath(); //获取线条的坐标
                         path.push(new google.maps.LatLng(loc[0], loc[1])); //为线条添加标记坐标
                         //生成标记图标
-                        var marker = new google.maps.Marker({
+
+                        // var marker = new google.maps.Marker({
+                        //     position: new google.maps.LatLng(loc[0], loc[1]),
+                        //     map: _this.map,
+                        //     icon: '../../assets/img/active/x1.png'
+                        //     // labelClass:"classA"
+                        // });
+                        var image = {
+                            url: 'http://imgfile.oytour.com/static/location_01.png', // image is 512 x 512
+                            scaledSize: new google.maps.Size(30, 40),  
+                        }; 
+                        //let image='http://imgfile.oytour.com/static/location_01.png'
+                         let marker = new MarkerWithLabel({
                             position: new google.maps.LatLng(loc[0], loc[1]),
-                            map: _this.map,
-                            icon: "http://labs.google.com/ridefinder/images/mm_20_green.png"
+                            icon: image, //标记自定义图标
+                            draggable: false, //不可拖动
+                            map: _this.map,   //地图实例 
+                            labelContent: i+1,    //label的内容
+                            labelAnchor: new google.maps.Point(202, 200),    //label的位置，可以调
+                            labelClass: "labels", // the CSS class for the label
+                            labelStyle: { background:'#fff',padding:'5px', borderRadius:'50%' }
                         });
 
-
+                        // marker = new google.maps.MarkerWithLabel({
+                        //     position: new google.maps.LatLng(loc[0], loc[1]),
+                        //     labelContent:'测试', //需要显示的标题的内容
+                        //     //labelAnchor: point, //当前标题基于marker左上角的偏移
+                        //     labelStyle:{ //标题的style样式
+                        //         color: "#fff",
+                        //         fontSize: "12px"
+                        //     },
+                        //     labelClass:"classA", //支持直接绑定class名，将样式写在css里面
+                        //     icon: 'http://imgfile.oytour.com/static/marker.png'
+                        // });
                     }
                 }
             }