Skip to content

A
Athena
Commit 36c69f59 authored by zhengke's avatar zhengke
Browse files
Options

加地图

parent 718d73d8
Hide whitespace changes
Inline Side-by-side
Showing with 162 additions and 39 deletions
src/components/Hotel/HotelDetail.vue
View file @ 36c69f59
......@@ -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
View file @ 36c69f59
......@@ -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 0 → 100644
View file @ 36c69f59
<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