Commit 36c69f59 authored by zhengke's avatar zhengke

加地图

parent 718d73d8
...@@ -201,7 +201,6 @@ ...@@ -201,7 +201,6 @@
} }
.HD_Kefang span{ .HD_Kefang span{
display: block; display: block;
margin-bottom:5px;
} }
.HD_Kefang span:first-child{ .HD_Kefang span:first-child{
font-size: 16px; font-size: 16px;
......
...@@ -176,8 +176,8 @@ ...@@ -176,8 +176,8 @@
.clearfix:after {content: "\0020";display: block;height: 0;clear: both;} .clearfix:after {content: "\0020";display: block;height: 0;clear: both;}
.HL_ListTable{ .HL_ListTable{
float:left; float:left;
/* width:840px; */ width:840px;
width:100%; /* width:100%; */
border-collapse:collapse; border-collapse:collapse;
} }
.HL_ListTable td{ .HL_ListTable td{
...@@ -206,8 +206,8 @@ ...@@ -206,8 +206,8 @@
float:left; float:left;
position: relative; position: relative;
margin-left:13px; margin-left:13px;
/* width:605px; */ width:605px;
width:900px; /* width:900px; */
height:148px; height:148px;
} }
.HL_ListTitle{ .HL_ListTitle{
...@@ -538,28 +538,6 @@ ...@@ -538,28 +538,6 @@
{{item.name}} {{item.name}}
</span> </span>
</div> </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_ScList MoreList" style="height:auto;">
<div class="HL_Stitle" style="height:45px;" :class="isOpen==2?'HL_Maxheight':''">理念</div> <div class="HL_Stitle" style="height:45px;" :class="isOpen==2?'HL_Maxheight':''">理念</div>
<div class="HL_Concept" :class="isOpen==1?'HL_minHeight':'HL_AutoHeight'"> <div class="HL_Concept" :class="isOpen==1?'HL_minHeight':'HL_AutoHeight'">
...@@ -583,8 +561,8 @@ ...@@ -583,8 +561,8 @@
</div> </div>
<div class="HL_ScList"> <div class="HL_ScList">
<span class="HL_Stitle">酒店名称</span> <span class="HL_Stitle">酒店名称</span>
<el-input type="text" class="HL_searchHotelName" style="width:320px;" v-model="keyWords" placeholder="请输入你想找的酒店名称" /> <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">搜索</span> <span class="HL_searchBtn" @click="SearchHotel(),resetPageIndex()">搜索</span>
</div> </div>
</div> </div>
<div class="HL_BtmList"> <div class="HL_BtmList">
...@@ -598,7 +576,7 @@ ...@@ -598,7 +576,7 @@
</div> </div>
<div class="clearfix" v-loading="loading"> <div class="clearfix" v-loading="loading">
<!-- <div style="width:838px;float:left;min-height:380px;"> --> <!-- <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"> <table class="HL_ListTable">
<tr v-for="item in dataList"> <tr v-for="item in dataList">
<td> <td>
...@@ -644,20 +622,20 @@ ...@@ -644,20 +622,20 @@
</td> </td>
</tr> </tr>
</table> </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>
<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> </div>
</div> </div>
<el-pagination v-if="dataList.length>0" class="pagination" <el-pagination v-if="dataList.length>0" class="pagination"
@current-change="CurrentChange" @current-change="CurrentChange"
:current-page.sync="msg.displayFrom" :current-page.sync="currentPage"
background background
layout="total, prev, pager, next" layout="total, prev, pager, next"
:total="TotalPage"> :total="TotalPage">
...@@ -666,6 +644,7 @@ ...@@ -666,6 +644,7 @@
</template> </template>
<script> <script>
import moment from "moment"; import moment from "moment";
import HTMap from '../global/HTMap'
export default { export default {
data() { data() {
return { return {
...@@ -691,6 +670,7 @@ export default { ...@@ -691,6 +670,7 @@ export default {
}, },
//总页数 //总页数
TotalPage:0, TotalPage:0,
currentPage:1,
monyMsg:{ monyMsg:{
//最小金额 //最小金额
searchMinRate:'', searchMinRate:'',
...@@ -909,6 +889,8 @@ export default { ...@@ -909,6 +889,8 @@ export default {
return time.getTime() < new Date(today_after7).getTime() - 8.64e7; return time.getTime() < new Date(today_after7).getTime() - 8.64e7;
} }
}, },
//坐标数组
travelLngLat:[]
}; };
}, },
mounted() { mounted() {
...@@ -925,6 +907,9 @@ export default { ...@@ -925,6 +907,9 @@ export default {
}, },
created() { created() {
},
components: {
HTMap
}, },
methods: { methods: {
CurrentChange(val) { CurrentChange(val) {
...@@ -1028,15 +1013,29 @@ export default { ...@@ -1028,15 +1013,29 @@ export default {
}) })
this.loading=true; this.loading=true;
this.dataList = []; this.dataList = [];
this.travelLngLat=[];
this.apipost("dmc_post_Get_GetJAPAN_HotelList",this.msg,res => { this.apipost("dmc_post_Get_GetJAPAN_HotelList",this.msg,res => {
console.log(res,'resssss');
this.loading=false; this.loading=false;
if (res.data.resultCode == 1) { 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=>{ this.dataList.forEach(x=>{
x.reviewRating = parseFloat(x.reviewRating); 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.TotalPage = parseInt(res.data.data.numberOfResultMatched);
this.PassMsg.groupBookingFlg = res.data.data.groupBookingFlg; this.PassMsg.groupBookingFlg = res.data.data.groupBookingFlg;
console.log(this.travelLngLat,'travellngggg');
} else { } else {
this.Error(res.data.message); this.Error(res.data.message);
} }
...@@ -1044,6 +1043,11 @@ export default { ...@@ -1044,6 +1043,11 @@ export default {
err => {} err => {}
); );
}, },
//重置页数
resetPageIndex() {
this.msg.displayFrom = 1;
this.currentPage=1;
},
//按人气排序 //按人气排序
OrderBySource(type){ OrderBySource(type){
this.msg.sort=type; this.msg.sort=type;
......
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment