加地图

src/components/Hotel/HotelDetail.vue

@@ -201,7 +201,6 @@
     }
     .HD_Kefang span{
         display: block;
-        margin-bottom:5px;
     }
     .HD_Kefang span:first-child{
         font-size: 16px;

src/components/Hotel/HotelList.vue

@@ -176,8 +176,8 @@
     .clearfix:after {content: "\0020";display: block;height: 0;clear: both;}
     .HL_ListTable{
         float:left;
-        /* width:840px; */
-        width:100%;
+        width:840px;
+        /* width:100%; */
         border-collapse:collapse;
     }
     .HL_ListTable td{
@@ -206,8 +206,8 @@
         float:left;
         position: relative;
         margin-left:13px;
-        /* width:605px; */
-        width:900px;
+        width:605px;
+        /* width:900px; */
         height:148px;
     }
     .HL_ListTitle{
@@ -538,28 +538,6 @@
                     {{item.name}}
                 </span>
             </div>
-            <!-- <div class="HL_ScList">
-                <span class="HL_Stitle">客房设施</span>
-                <span>禁烟</span>
-                <span>吸烟</span>
-            </div> -->
-            <!-- <div class="HL_ScList">
-                <span class="HL_Stitle">网络</span>
-                <span>WiFi（免费）</span>
-                <span>WiFi（收费）</span>
-                <span>有线（免费）</span>
-                <span>有线（收费）</span>
-            </div> -->
-            <!-- <div class="HL_ScList">
-                <span class="HL_Stitle">支付方法</span>
-                <span>可以网上支付</span>
-                <span>可以当地支付</span>
-            </div>
-            <div class="HL_ScList">
-                <span class="HL_Stitle">产品特性</span>
-                <span>越早预订越便宜</span>
-                <span>限定期限</span>
-            </div> -->
             <div class="HL_ScList MoreList" style="height:auto;">
                 <div class="HL_Stitle" style="height:45px;" :class="isOpen==2?'HL_Maxheight':''">理念</div>
                 <div class="HL_Concept" :class="isOpen==1?'HL_minHeight':'HL_AutoHeight'">
@@ -583,8 +561,8 @@
             </div>
             <div class="HL_ScList">
                 <span class="HL_Stitle">酒店名称</span>
-                <el-input type="text" class="HL_searchHotelName" style="width:320px;" v-model="keyWords" placeholder="请输入你想找的酒店名称"  />
-                <span class="HL_searchBtn" @click="SearchHotel">搜索</span>
+                <el-input type="text" class="HL_searchHotelName" style="width:320px;" @keyup.native.enter="SearchHotel(),resetPageIndex()" v-model="keyWords" placeholder="请输入你想找的酒店名称"  />
+                <span class="HL_searchBtn" @click="SearchHotel(),resetPageIndex()">搜索</span>
             </div>
         </div>
         <div class="HL_BtmList">
@@ -598,7 +576,7 @@
             </div>
             <div class="clearfix" v-loading="loading">
                 <!-- <div style="width:838px;float:left;min-height:380px;"> -->
-                    <div style="width:100%;float:left;min-height:380px;">
+                <div style="float:left;min-height:380px;" v-if="dataList.length>0">
                     <table class="HL_ListTable">
                         <tr v-for="item in dataList">
                             <td>
@@ -644,20 +622,20 @@
                             </td>
                         </tr>
                     </table>
-                    <div v-if="dataList.length==0" style="padding:15px 0;text-align:center">
-                        <div class="empty-data"><i class="iconfont icon-kong"></i>
-                            很抱歉，你想要的信息我们真的找不到了
-                        </div>
-                    </div>
                 </div>
-                <div class="HL_Map" style="display:none;">
-
+                <div class="HL_Map" v-if="travelLngLat.length>0">
+                    <HTMap :dataList="travelLngLat" :type="1"></HTMap>
+                </div>
+                <div v-if="dataList.length==0" style="padding:15px 0;text-align:center">
+                    <div class="empty-data"><i class="iconfont icon-kong"></i>
+                        很抱歉，你想要的信息我们真的找不到了
+                    </div>
                 </div>
             </div>
         </div>
         <el-pagination v-if="dataList.length>0" class="pagination"
             @current-change="CurrentChange"
-            :current-page.sync="msg.displayFrom"              
+            :current-page.sync="currentPage"              
             background
             layout="total, prev, pager, next"
             :total="TotalPage">
@@ -666,6 +644,7 @@
 </template>
 <script>
 import moment from "moment";
+import HTMap from '../global/HTMap'
 export default {
   data() {
     return {
@@ -691,6 +670,7 @@ export default {
       },
       //总页数
       TotalPage:0,
+      currentPage:1,
       monyMsg:{
         //最小金额
         searchMinRate:'',
@@ -909,6 +889,8 @@ export default {
           return time.getTime() < new Date(today_after7).getTime() - 8.64e7;
         }
       },
+      //坐标数组
+      travelLngLat:[]
     };
   },
   mounted() {
@@ -925,6 +907,9 @@ export default {
   },
   created() {
 
+  },
+  components: {
+     HTMap
   },
   methods: {
     CurrentChange(val) {
@@ -1028,15 +1013,29 @@ export default {
         })
         this.loading=true;
         this.dataList = [];
+        this.travelLngLat=[];
         this.apipost("dmc_post_Get_GetJAPAN_HotelList",this.msg,res => {
+            console.log(res,'resssss');
             this.loading=false;
             if (res.data.resultCode == 1) {
-                this.dataList = res.data.data.hotelSummary;
+                if(Object.prototype.toString.call(res.data.data.hotelSummary) == '[object Object]'){
+                    this.dataList.push(res.data.data.hotelSummary);
+                }else{
+                    this.dataList = res.data.data.hotelSummary;
+                }
+                //获取酒店坐标
                 this.dataList.forEach(x=>{
                     x.reviewRating = parseFloat(x.reviewRating);
+                    let obj = {
+                        lat:x.latitudeW,
+                        lng:x.longitudeW,
+                        name:x.hotelName
+                    }
+                    this.travelLngLat.push(obj);
                 })
                 this.TotalPage = parseInt(res.data.data.numberOfResultMatched);
                 this.PassMsg.groupBookingFlg = res.data.data.groupBookingFlg;
+                console.log(this.travelLngLat,'travellngggg');
             } else {
                 this.Error(res.data.message);
             }
@@ -1044,6 +1043,11 @@ export default {
             err => {}
         );
     },
+    //重置页数
+    resetPageIndex() {
+        this.msg.displayFrom = 1;
+        this.currentPage=1;
+    },
     //按人气排序
     OrderBySource(type){
         this.msg.sort=type;

src/components/global/HTMap.vue

+<style>
+  .markers_labels{
+    margin-left: -24px !important;
+    margin-top: -43px !important;
+  }
+  .gm-svpc,.gm-style-mtc,.gm-style-cc{
+    display: none;
+  }
+  .classDetail{
+      height:244px;
+      width:100%
+  }
+  .ClassList{
+      width:100%;
+      height:380px;
+  }
+</style>
+
+<template>
+    <div >
+      <div id="map_canvas" :class="type==2?'classDetail':'ClassList'"></div>
+    </div>
+</template>
+<script>
+    export default {
+      props:["dataList","type"],
+      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(){
+          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
+          });
+          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,
+          };
+          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>
+