页面修改

src/components/global/tripMap.vue

@@ -49,7 +49,7 @@
                     scenicImage: "http://imgfile.oytour.com/static/location_scenic.png",
                     planeImage: "http://imgfile.oytour.com/static/location_plane.png"
                 },
-                myScenArr:[]
+                markerArray: [], //标记数组
             }
         },
         watch: {
@@ -70,7 +70,7 @@
             // 地图实例
             mapBuild() {
                 let _this = this;
-                //this.polyline = {};
+                this.markerArray = [];
                 if (this.locationArray && this.locationArray.length > 0) {
                     let lat = parseFloat(this.locationArray[0].lat)
                     let lng = parseFloat(this.locationArray[0].lng)
@@ -138,7 +138,6 @@
             },
             // 创建路径规划
             calcRoute: function (waypoints) {
-                console.log(waypoints, 'waypoints');
                 let _this = this;
                 var startArray = waypoints[0].location.split(',');
                 let lat = parseFloat(startArray[0]);
@@ -147,37 +146,40 @@
                 this.map.setZoom(10);
                 //全部
                 if (this.type == 1) {
-                    /* 循环标出所有坐标 */
                     this.drawDrivingRute(waypoints);
+                    waypoints.forEach((item, index) => {
+                        this.addMarker(item, index + 1);
+                    });
                 }
                 //每天
                 else {
-                    /* 循环标出所有坐标 */
-                    this.myScenArr=[];
                     for (var i = 0; i < waypoints.length - 1; i++) {
                         var currentItem = waypoints[i];
                         var nextItem = waypoints[i + 1];
-
                         if (currentItem && currentItem.trafficType == 4) {
                             this.drawWalkRoute(currentItem.location, nextItem.location);
-                            this.addMarker(currentItem, i + 1),
-                            this.addMarker(nextItem, i + 2);
                         } else {
                             var newArray = [];
                             newArray.push(currentItem);
                             newArray.push(nextItem);
                             this.drawDrivingRute(newArray);
-
-                            if(waypoints[i].type==2){
-                                this.myScenArr.push(waypoints[i]);
-                            }   
                         }
-                    }
-                    for(var i=0;i<this.myScenArr.length-1;i++){
-                        var locationStart = this.myScenArr[i].location.split(',');
-                        var locationEnd = this.myScenArr[i+1].location.split(',');
-                        let distance = this.CalcDistance(locationStart[0],locationStart[1],locationEnd[0],locationEnd[1]);
-                        this.myScenArr[i].distance=distance;
+                        if (i == 0) {
+                            this.addMarker(currentItem, i + 1);
+                        } else {
+                            var preitem = waypoints[i - 1];
+                            var startArray = preitem.location.split(',');
+                            var currentArray = currentItem.location.split(',');
+                            var currentdistance = this.CalcDistance(currentArray[0], currentArray[1], startArray[0],
+                                startArray[1]);
+                            this.addMarker(currentItem, i + 1, currentdistance);
+                            if (i == waypoints.length - 2) {
+                                var nextArray = nextItem.location.split(',');
+                                var nextdistance = this.CalcDistance(nextArray[0], nextArray[1], currentArray[0],
+                                    currentArray[1]);
+                                this.addMarker(nextItem, i + 2, nextdistance);
+                            }
+                        }
                     }
                 }
             },
@@ -187,16 +189,9 @@
                     var form_loc = array[i].location.split(',');
                     var path = this.polyline.getPath(); //获取线条的坐标
                     path.push(new google.maps.LatLng(form_loc[0], form_loc[1])); //为线条添加标记坐标
-                    this.addMarker(array[i], i + 1);
                 }
             },
-            addMarker(obj, title) {
-                console.log(obj,'objjjjj');
-                this.myScenArr.forEach(x=>{
-                    if((x.type==obj.type)&&(x.name==obj.name)){
-                        obj.distance=x.distance
-                    }
-                })
+            addMarker(obj, title, distance) {
                 var loc = obj.location.split(',');
                 //生成标记图标
                 var image = {}
@@ -251,9 +246,12 @@
                 });
                 //景点
                 if (type == 2) {
-                console.log(obj,'objjjjjj');
+                    var str = '<div>' + obj.name + '</div>';
+                    if (distance) {
+                        str += '<br/><div>' + distance + 'KM<div>'
+                    }
                     let infowindow = new google.maps.InfoWindow({
-                        content: '<div>' + obj.name + '</div><br/><div>'+obj.distance+'<div>',
+                        content: str,
                         size: new google.maps.Size(50, 50)
                     });
 
@@ -289,20 +287,21 @@
                     }
                 });
             },
+            getRad(d) {
+                return d * Math.PI / 180.0;
+            },
             //计算两点之间的距离
-            CalcDistance(sX, sY, eX, eY) {
-                var lat = [sX, eX]
-                var lng = [sY, sY] //var R = 6371; // km (change this constant to get miles)  
-                var R = 6378137; //地球半径 
-                var dLat = (lat[1] - lat[0]) * Math.PI / 180;
-                var dLng = (lng[1] - lng[0]) * Math.PI / 180;
-                var dLat1 = lat[0] * Math.PI / 180;
-                var dLat2 = lat[1] * Math.PI / 180;
-                var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(dLat1) * Math.cos(dLat1) * Math.sin(dLng /
-                    2) * Math.sin(dLng / 2);
-                var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-                var d = R * c;
-                return Math.round(d);
+            CalcDistance(lat1, lng1, lat2, lng2) {
+                var EARTH_RADIUS = 6378137.0; //单位M
+                var radLat1 = this.getRad(lat1);
+                var radLat2 = this.getRad(lat2);
+                var a = radLat1 - radLat2;
+                var b = this.getRad(lng1) - this.getRad(lng2);
+                var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) *
+                    Math.pow(Math.sin(b / 2), 2)));
+                s = s * EARTH_RADIUS;
+                s = Math.round(s * 10000) / 10000.0/1000.0;
+                return Math.round(s);
             }
         },
     }