增加地图

src/components/newTravelmanager/oldTravelGroupControl/TravelManager5.vue

@@ -57,10 +57,25 @@
           <div v-if="modifyType==2" class="DTSaveBtn" :class="{'disClick':!isSubmit}" @click="submitForm(3)"
                title="另存为新模板">保存
           </div>
+
           <div v-if="ConfigId>0" class="DTSaveBtn" :class="{'disClick':!isSubmit}" @click="goB2B()">预览</div>
+          <div class="DTSaveBtn" v-if="ConfigId>0" @click="getMapList()">地图</div>
         </div>
       </div>
     </div>
+
+     <el-dialog
+      custom-class="w800"
+      title="行程地图"
+      :visible.sync="isShowMap"
+      center
+    >
+      <TravelMap :dataList="travelLngLat"></TravelMap>
+      <div slot="footer" class="dialog-footer">
+        <button class="hollowFixedBtn" @click="isShowMap = false">{{$t('pub.cancelBtn')}}</button>
+      </div>
+    </el-dialog>           
+
   </div>
 </template>
 
@@ -71,6 +86,8 @@
   import TravelNotice from '../TravelGroupControl/TravelNotice'
   import TravelPrice2 from '../TravelGroupControl/TravelPrice2'
 
+  import TravelMap from '../oldTravelGroupControl/TravelMap'
+
   export default {
     provide () {
       return {
@@ -199,6 +216,8 @@
         loading: false,
         isNewConfig: true,
         isfromManager: true,
+        isShowMap:false,
+        travelLngLat:[]
       }
     },
     components: {
@@ -206,7 +225,8 @@
       TravelDaysTripDirect: TravelDaysTripDirect,
       TravelFeature: TravelFeature,
       TravelNotice: TravelNotice,
-      TravelPrice2: TravelPrice2
+      TravelPrice2: TravelPrice2,
+      TravelMap:TravelMap
     },
     methods: {
       /*获取行程特色内容对象*/
@@ -753,6 +773,22 @@
           '_blank'
         )
       },
+      //获取地图
+      getMapList(){
+        this.isShowMap=true
+        this.journeyList.DayList.forEach(x=>{
+            x.dayArray.forEach(y=>{
+              if((y.Type==2||y.Type==3)&&(y.childItem.Lat!=""&&y.childItem.Lng!="")){
+                  this.travelLngLat.push({
+                    lat:y.childItem.Lat,
+                    lng:y.childItem.Lng,
+                    name:y.childItem.CouponsName=="undefined"?y.childItem.HotelName:y.childItem.CouponsName,
+                    type:y.Type
+                })
+              }
+          })
+        })
+      }
     },
     updated: function () {
       this.MsgBus.$emit('FeatureDataFlag')
@@ -765,11 +801,11 @@
       if (this.$route.query.allotId) {
         this.PostConfig.allotId = this.$route.query.allotId
       }
-      console.log("this.PostConfig",this.PostConfig)
       this.ScrollMethod()
+
     },
     created () {
-      this.firstLoadConfigInfo()
+      this.firstLoadConfigInfo();
     }
   }
 

src/components/newTravelmanager/oldTravelGroupControl/TravelMap.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 >
+      <div id="map_canvas" style="height: 400px; width: 100%"></div>
+    </div>
+</template>
+<script>
+    export default {
+      props:["dataList"],
+        name: 'GGMap',
+      data(){
+          return{
+            show:false,
+            directionsService: new google.maps.DirectionsService(),
+            directionsDisplay: new google.maps.DirectionsRenderer(),
+            map:{},
+          }
+      },
+      created(){
+       
+      },
+      destroyed: function() {
+
+      },
+      mounted(){
+      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(){
+          console.log(this.dataList)
+          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() {   // 创建路径规划
+          //  分解数据  获得起 止 以及中间数据
+          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)
+          _this.directionsService.route(request, function(result, status) {
+            if (status == google.maps.DirectionsStatus.OK) {
+              _this.directionsDisplay.setDirections(result);
+            }
+          });
+        },
+      },
+    }
+</script>
+