增加地图显示

src/components/Hotel/SupplierView.vue

@@ -24,7 +24,7 @@
         font-weight: bold;
         color:#000000;
         font-size:16px;
-        margin-bottom:10px;
+        margin-top:30px;
     }
     .HD_Top_Address{
         font-size:14px;
@@ -510,6 +510,12 @@
         top:1px;
         margin-left:20px;
     }
+    .HD_TOP_Map{
+        width:100%;
+        height:244px;
+        margin-top:27px;
+        border:1px solid #DDDDDD;
+    }
 </style>
 
 <template>
@@ -526,7 +532,7 @@
                     <img src="../../assets/img/hotel/address.png" alt=""/>
                     {{tempData.SHotelAddress}}
                 </div>
-                <div class="HD_Top_ImgList clearfix" style="margin-top:30px;" v-if="isShowImg">
+                <div class="HD_Top_ImgList clearfix" style="margin:65px 0 30px 0;" v-if="isShowImg">
                     <div class="HD_Top_FirstImg">
                             <img v-if="tempData.SHotelImgCoverArray[0] && tempData.SHotelImgCoverArray[0]!='' " @click="bigImgShow(0)" :src="tempData.SHotelImgCoverArray[0]"
                             :onerror="defaultHeadImg" class="HeadImg" alt="" />
@@ -573,6 +579,9 @@
                         </el-rate>
                     </div>
                 </div>
+                <div class="HD_TOP_Map" v-if="travelLngLat.length>0">
+                    <HTMap :dataList="travelLngLat" :type="2"></HTMap>
+                </div>
             </div>  
         </div>
         <div class="HD_btnContent" style="margin-top:0;">
@@ -629,12 +638,12 @@
                                     <div>面积：{{item.Area}} ㎡</div>
                                     <!-- <div style="margin-left:20px;">窗型：{{item.WindoWCut}}</div> -->
                                 </li>
-                                <li class="HD_FreeWifi" style="width:256px;">
+                                <li class="HD_FreeWifi" style="width:256px;margin-right:20px;">
                                     <div>前台服务时间至 {{tempData.ServiceTime}}</div>
                                     <div style="margin-left:10px;">早到入住时间 {{tempData.CheckInTime}}</div>
                                     <div style="margin-left:10px;">退房时间 {{tempData.CheckOutTime}}</div>
                                 </li>
-                                <li class="HD_Lingprice">
+                                <li class="HD_Lingprice" style="width:100px;margin-right:30px;">
                                     <div>
                                         <template v-if="item.PriceList&&item.PriceList.length>0">
                                             <i class="rmb" style="display:none;">RMB</i>
@@ -664,9 +673,13 @@
                 <img src="../../assets/img/hotel/hotel.png" alt="">
                 酒店信息
             </div>
-            <div class="HD_hotelComIntroduce">
+            <div class="HD_hotelComIntroduce" style="color:#42647f;">
                 <h3 class="Hd_titles">酒店介绍</h3>
-                <div style="line-height:2;color:#42647f;" v-html="tempData.SHotelInfo"></div>
+                <div style="line-height:2;" v-html="tempData.SHotelInfo"></div>
+                <div style="margin:10px 0;">酒店联系方式：{{tempData.HotelContract}}</div>
+                <div>
+                    退订原则：{{tempData.BackRule}}
+                </div>
             </div>
             <div class="HD_hotelComIntroduce introduceSupplier">
                 <div class="Hd_titles">设施与服务</div>
@@ -731,6 +744,7 @@
     </div>
 </template>
 <script>
+import HTMap from "../global/HTMap";
 import moment from "moment";
 export default {
   data() {
@@ -766,6 +780,8 @@ export default {
       isShowImg:false,
       dataList:[],
       HotelId:'',
+      //地图坐标
+      travelLngLat: [],
       beforeCheck: {
         disabledDate: time => {
             if (this.msg.CheckOutTime == null) {
@@ -801,6 +817,7 @@ export default {
       
   },
   components: {
+      HTMap
   },
   methods: {
     inited(viewer) {
@@ -834,6 +851,20 @@ export default {
                 this.tempData = res.data.data;
                 this.images=this.tempData.SHotelImgCoverArray;
                 this.isShowImg=true;
+                this.travelLngLat=[]
+                if(this.tempData.Lng!=''&&this.tempData.Lat!=''){
+                    this.travelLngLat.push({
+                        lat: this.tempData.Lat,
+                        lng: this.tempData.Lng,
+                        name: this.tempData.SHotelName
+                    });
+                }else{
+                    this.travelLngLat.push({
+                        lat: 30.6574389,
+                        lng: 104.06592380000006,
+                        name: ''
+                    });
+                }
             } else {
               this.Error(res.data.message);
             }

src/components/global/HTMap.vue

@@ -76,7 +76,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()
@@ -95,7 +96,8 @@
             this.map = new google.maps.Map(document.getElementById('map_canvas'), {
               center: this.ptcenter,
               zoom: 15,
-              mapTypeId: google.maps.MapTypeId.ROADMAP
+              mapTypeId: google.maps.MapTypeId.ROADMAP,
+              gestureHandling: 'greedy'
             })
             var markerStart = new google.maps.Marker({
                 position: this.ptstart