534 lines
21 KiB
HTML
534 lines
21 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>黑马旅游</title>
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
|
|||
|
|
<link rel="stylesheet" href="./css/index.css"/>
|
|||
|
|
<link rel="stylesheet" href="./css/banner.css"/>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div id="app" @click="showOps=false">
|
|||
|
|
<div style="width: 70%;text-align: center;margin: auto;">
|
|||
|
|
<div class="banner">
|
|||
|
|
<div class="logo">
|
|||
|
|
<img src="./img/heima.png" alt="1"/>
|
|||
|
|
<span>
|
|||
|
|
<div class="logo-ch">黑马旅游</div>
|
|||
|
|
<div class="logo-en">www.itheima.com</div>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div >
|
|||
|
|
<input type="checkbox" id="toggle-button" v-model="isTest">
|
|||
|
|
<!--label中的for跟input的id绑定。作用是在点击label时选中input或者取消选中input-->
|
|||
|
|
<label for="toggle-button" class="button-label">
|
|||
|
|
<span class="circle"></span>
|
|||
|
|
<span class="text on">测试</span>
|
|||
|
|
<span class="text off">正式</span>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!--关键字搜索-->
|
|||
|
|
<div class="search-bar">
|
|||
|
|
<div class="input-box">
|
|||
|
|
<input title="输入关键字搜索酒店" v-model="params.key" type="text" @click.stop="" @focus="showOps=true"
|
|||
|
|
@keyup="handleKeyUp($event)">
|
|||
|
|
<button @click="handleSearch">搜索</button>
|
|||
|
|
</div>
|
|||
|
|
<div id="complete-box" v-show="showOps && ops.length > 0">
|
|||
|
|
<div v-for="(item, i) in ops" :key="i" @click="handleSearch" @mouseover="opsIndex = i"
|
|||
|
|
:style='{"background-color": opsIndex===i ? "#EEE" : "#fff"}'>{{item}}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 已选择过滤项 -->
|
|||
|
|
<div class="selected-ops">
|
|||
|
|
<div class="open">全部结果：</div>
|
|||
|
|
<div class="selected-op" v-for="(v, k) in params.filters" :key="k" @click="deleteFilter(k)">
|
|||
|
|
{{filterNames[k]}}：<span>{{v}} <span class='close'>×</span></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!--过滤项-->
|
|||
|
|
<div class="filter-list">
|
|||
|
|
<div v-for="(v, k) in remainFilter" :key="k">
|
|||
|
|
<div class="filter-box">
|
|||
|
|
<div class="f-key"><strong>{{filterNames[k]}}</strong></div>
|
|||
|
|
<div class="column-divider"></div>
|
|||
|
|
<div class="f-items">
|
|||
|
|
<div class="f-item" @click="clickFilter(k, o)" v-for="(o, j) in v" :key="j"><a href="javascript:void(0)">
|
|||
|
|
{{o}}</a></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row-divider"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="filter-box">
|
|||
|
|
<div class="f-key"><strong>价格</strong></div>
|
|||
|
|
<div class="column-divider"></div>
|
|||
|
|
<div class="f-items">
|
|||
|
|
<div class="f-item" @click="clickFilter('price','0-100')"><a href="javascript:void(0)">100元以下</a></div>
|
|||
|
|
<div class="f-item" @click="clickFilter('price','100-300')"><a href="javascript:void(0)">100-300元</a></div>
|
|||
|
|
<div class="f-item" @click="clickFilter('price','300-600')"><a href="javascript:void(0)">300-600元</a></div>
|
|||
|
|
<div class="f-item" @click="clickFilter('price','600-1500')"><a href="javascript:void(0)">600-1500元</a></div>
|
|||
|
|
<div class="f-item" @click="clickFilter('price','1500-0')"><a href="javascript:void(0)">1500元以上</a></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 排序 -->
|
|||
|
|
<div class="top-ban">
|
|||
|
|
<!--排序条件-->
|
|||
|
|
<div class="sort-items">
|
|||
|
|
<div class="sort-item" v-for="(item, i) in sortItems" :key="i">
|
|||
|
|
<a :class="{selected: params.sortBy===item.key}" @click="params.sortBy=item.key"
|
|||
|
|
href="javascript:void(0)">{{item.text}}</a>
|
|||
|
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!--分页条-->
|
|||
|
|
<div class="top-pagination">
|
|||
|
|
<span>共 <i style="color: #222;">{{total}}</i> 家酒店</span>
|
|||
|
|
<span><i style="color: red;">{{params.page}}</i>/{{totalPage}}</span>
|
|||
|
|
<a class="btn-arrow" href="#" style="display: inline-block" @click="prePage"><</a>
|
|||
|
|
<a class="btn-arrow" href="#" style="display: inline-block" @click="nextPage">></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row-divider" style="margin-bottom: 5px; width: 100%"></div>
|
|||
|
|
<!--酒店列表-->
|
|||
|
|
<div style="display: flex; justify-content: space-between;">
|
|||
|
|
|
|||
|
|
<div class="hotel-list">
|
|||
|
|
<div class="hotel-box" v-for="(hotel,i) in hotels" :key="i"
|
|||
|
|
style="display: flex;justify-content: space-between;" @mouseover="handleMarkerFocus(hotel)">
|
|||
|
|
<div class="ad-mark" v-if="hotel.isAD">
|
|||
|
|
<img src="./img/ad.png" width="25"/>
|
|||
|
|
</div>
|
|||
|
|
<div style="width: 0;"></div>
|
|||
|
|
<div style="width: 25%"><img width="100%" :src="hotel.pic"></div>
|
|||
|
|
<div class="hotel-info">
|
|||
|
|
<div class="hotel-name" v-html="hotel.name">
|
|||
|
|
</div>
|
|||
|
|
<div class="star-name"> {{hotel.starName}}</div>
|
|||
|
|
<div class="address">
|
|||
|
|
位于 <span style="color: #BC8516;">{{hotel.business}}</span> 周边，{{hotel.address}}
|
|||
|
|
</div>
|
|||
|
|
<div class="order"> 1分钟前有人预订了该酒店</div>
|
|||
|
|
<div v-if="hotel.distance" class="address">距离您 {{hotel.distance.toFixed(2)}} km</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="text-align: left; width: 15%;">
|
|||
|
|
<div>
|
|||
|
|
<b style="color: #f60;">￥</b> <span id='hotel-price'>{{hotel.price}}</span> <span
|
|||
|
|
style="font-size: 0.2em; color: #999;">起</span>
|
|||
|
|
</div>
|
|||
|
|
<div class='btn'>立即预定</div>
|
|||
|
|
<div>
|
|||
|
|
<span class="hotel-score">{{hotel.score / 10}}分</span> /<span>5分</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div :class='{"map-box": true, "fixed-map": isFixed}' :style="{left: ml + 'px'}">
|
|||
|
|
<div class="map-head">地图预览</div>
|
|||
|
|
<div class="amap" id="container"></div>
|
|||
|
|
<div class="map-geo" @click="getGeoLoc">
|
|||
|
|
<img src="https://a.amap.com/jsapi/static/image/plugin/waite.png" v-show="loading">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="./js/vue.js"></script>
|
|||
|
|
<script src="./js/axios.min.js"></script>
|
|||
|
|
<script src="./js/amap.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=ddd292c88aa1bad9c04891a47724f40a"></script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 设置后台服务地址
|
|||
|
|
axios.defaults.baseURL = "http://localhost:8089";
|
|||
|
|
axios.defaults.timeout = 3000;
|
|||
|
|
|
|||
|
|
let app = new Vue({
|
|||
|
|
el: "#app",
|
|||
|
|
data: {
|
|||
|
|
isTest: false,
|
|||
|
|
filterNames: {
|
|||
|
|
brand: "品牌",
|
|||
|
|
city: "城市",
|
|||
|
|
starName: "星级",
|
|||
|
|
price: "价格",
|
|||
|
|
},
|
|||
|
|
filterList: {},// 过滤项的假数据
|
|||
|
|
sortItems: [
|
|||
|
|
{
|
|||
|
|
key: "default",
|
|||
|
|
text: "默认",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: "score",
|
|||
|
|
text: "评价",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: "price",
|
|||
|
|
text: "价格",
|
|||
|
|
}
|
|||
|
|
],// 排序字段的假数据
|
|||
|
|
hotels: [],// 酒店数据
|
|||
|
|
total: 0, // 总条数
|
|||
|
|
totalPage: 0, // 总页数
|
|||
|
|
params: {
|
|||
|
|
key: "", // 搜索关键字
|
|||
|
|
page: 1, // 当前页码
|
|||
|
|
size: 5, // 每页大小
|
|||
|
|
sortBy: "default",// 排序字段
|
|||
|
|
filters: {}, // 过滤字段
|
|||
|
|
},
|
|||
|
|
map: {},// 地图对象
|
|||
|
|
loc: "", // 地图标记
|
|||
|
|
ml: 0, // 控制地图位置
|
|||
|
|
geolocation:{}, // 定位系统
|
|||
|
|
loading: false, // 是否在定位
|
|||
|
|
currentHotel: {},
|
|||
|
|
ops: [],
|
|||
|
|
showOps: false,
|
|||
|
|
opsIndex: -1,
|
|||
|
|
isFixed: false,
|
|||
|
|
testFilterData: {
|
|||
|
|
"city": ["上海", "北京", "深圳", "杭州"],
|
|||
|
|
"starName": ["四星","五星","二钻","三钻","四钻","五钻"],
|
|||
|
|
"brand": ["7天酒店", "如家","速8", "皇冠假日","华美达","万怡","喜来登","万豪","和颐","希尔顿"],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
"params.sortBy"() {
|
|||
|
|
// 每当page改变，当前代码就会执行。搜索一下
|
|||
|
|
this.search(this.loc);
|
|||
|
|
},
|
|||
|
|
"params.page"() {
|
|||
|
|
// 每当page改变，当前代码就会执行。搜索一下
|
|||
|
|
this.search(this.loc);
|
|||
|
|
},
|
|||
|
|
"params.filters": {
|
|||
|
|
deep: true,
|
|||
|
|
handler() {
|
|||
|
|
this.search();
|
|||
|
|
// 获取过滤项
|
|||
|
|
this.getFilter();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
opsIndex() {
|
|||
|
|
if (this.opsIndex !== -1) {
|
|||
|
|
this.params.key = this.ops[this.opsIndex]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
// 页面加载时，先搜索一下
|
|||
|
|
this.search();
|
|||
|
|
// 获取过滤项
|
|||
|
|
this.getFilter();
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
//初始化地图
|
|||
|
|
this.map = new AMap.Map('container', {
|
|||
|
|
resizeEnable: true, //是否监控地图容器尺寸变化
|
|||
|
|
zoom: 11, //初始地图级别
|
|||
|
|
center: [120.0, 32.0], //初始地图中心点
|
|||
|
|
});
|
|||
|
|
// 初始化定位系统
|
|||
|
|
AMap.plugin('AMap.Geolocation', () => {
|
|||
|
|
this.geolocation = new AMap.Geolocation({
|
|||
|
|
position: 'RT', //定位按钮的停靠位置
|
|||
|
|
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
|
|||
|
|
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// AMap.Event.addListener(geolocation, 'complete', result => {
|
|||
|
|
// if (this.params.page !== 1) {
|
|||
|
|
// this.params.page = 1;
|
|||
|
|
// this.loc = result.position.lat + ", " + result.position.lng;
|
|||
|
|
// } else {
|
|||
|
|
// this.searchByMap(result.position.lat + ", " + result.position.lng);
|
|||
|
|
// }
|
|||
|
|
//
|
|||
|
|
// });//返回定位信息
|
|||
|
|
// AMap.Event.addListener(geolocation, 'error', err => console.log(err)); //返回定位出错信息
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
let oDiv = document.querySelector(".map-box"),
|
|||
|
|
H = 0,
|
|||
|
|
Y = oDiv;
|
|||
|
|
while (Y) {
|
|||
|
|
H += Y.offsetTop;
|
|||
|
|
Y = Y.offsetParent;
|
|||
|
|
}
|
|||
|
|
window.addEventListener('scroll', () => this.handleScroll(H, oDiv));
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
handleScroll(h, o) {
|
|||
|
|
let s = document.body.scrollTop || document.documentElement.scrollTop
|
|||
|
|
this.isFixed = s > h;
|
|||
|
|
this.ml = o.offsetLeft;
|
|||
|
|
},
|
|||
|
|
handleKeyUp(e) {
|
|||
|
|
if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 8) {
|
|||
|
|
// 用户输入的字符，需要自动补全
|
|||
|
|
this.getSuggestion();
|
|||
|
|
} else if (e.keyCode === 13) {
|
|||
|
|
// 用户按回车，需要搜索
|
|||
|
|
this.search();
|
|||
|
|
this.getFilter();
|
|||
|
|
} else if (e.keyCode === 38) {
|
|||
|
|
if (this.opsIndex > 0) {
|
|||
|
|
this.opsIndex--;
|
|||
|
|
} else {
|
|||
|
|
this.opsIndex = this.ops.length - 1;
|
|||
|
|
}
|
|||
|
|
} else if (e.keyCode === 40) {
|
|||
|
|
this.opsIndex = (this.opsIndex + 1) % this.ops.length;
|
|||
|
|
} else if (e.keyCode === 27) {
|
|||
|
|
this.show = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleSearch(){
|
|||
|
|
this.search();
|
|||
|
|
this.getFilter();
|
|||
|
|
},
|
|||
|
|
getSuggestion() { // 查询自动补全
|
|||
|
|
if (!this.params.key) {
|
|||
|
|
// key没有值，不去搜索了
|
|||
|
|
this.ops = [];
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
axios.get("/hotel/suggestion?key=" + this.params.key)
|
|||
|
|
.then(resp => {
|
|||
|
|
this.ops = resp.data;
|
|||
|
|
})
|
|||
|
|
.catch(e => {
|
|||
|
|
if(this.isTest){
|
|||
|
|
this.ops = ["万豪", "如家", "喜来登"]
|
|||
|
|
}else{
|
|||
|
|
this.ops = []
|
|||
|
|
}
|
|||
|
|
console.log(e);
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getFilter() {
|
|||
|
|
if(this.isTest){
|
|||
|
|
this.filterList = this.testFilterData;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 准备参数
|
|||
|
|
const {filters: {price: ps, ... fs}, ...params} = this.params;
|
|||
|
|
for( _k in fs){
|
|||
|
|
params[_k] = fs[_k];
|
|||
|
|
}
|
|||
|
|
// 处理价格
|
|||
|
|
if(ps){
|
|||
|
|
let pArr = ps.split("-");
|
|||
|
|
params.minPrice = parseInt(pArr[0]);
|
|||
|
|
let max = parseInt(pArr[1]);
|
|||
|
|
params.maxPrice = max === 0 ? 999999 : max;
|
|||
|
|
}
|
|||
|
|
axios.post("/hotel/filters", params)
|
|||
|
|
.then(resp => {
|
|||
|
|
this.filterList = resp.data;
|
|||
|
|
})
|
|||
|
|
.catch(err => {
|
|||
|
|
console.log(err);
|
|||
|
|
this.filterList = this.testFilterData;
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
searchByMap(location) {
|
|||
|
|
// 准备参数
|
|||
|
|
const {filters: {price: ps, ... fs}, ...params} = this.params;
|
|||
|
|
for( _k in fs){
|
|||
|
|
params[_k] = fs[_k];
|
|||
|
|
}
|
|||
|
|
// 处理价格
|
|||
|
|
if(ps){
|
|||
|
|
let pArr = ps.split("-");
|
|||
|
|
params.minPrice = parseInt(pArr[0]);
|
|||
|
|
let max = parseInt(pArr[1]);
|
|||
|
|
params.maxPrice = max === 0 ? 999999 : max;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 准备地址
|
|||
|
|
if (location) {
|
|||
|
|
params.location = location;
|
|||
|
|
this.loc = location;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
axios.post("/hotel/list", params)
|
|||
|
|
.then(resp => {
|
|||
|
|
this.hotels = resp.data.hotels;
|
|||
|
|
this.total = resp.data.total;
|
|||
|
|
this.totalPage = Math.floor((this.total + 5 - 1) / 5);
|
|||
|
|
if (location) {
|
|||
|
|
this.setMapCenter(location);
|
|||
|
|
} else if(this.hotels && this.hotels.length > 0){
|
|||
|
|
this.setMapCenter(this.hotels[0].location);
|
|||
|
|
}
|
|||
|
|
this.initMarker();
|
|||
|
|
})
|
|||
|
|
.catch(err => {
|
|||
|
|
console.log(err)
|
|||
|
|
this.hotels = [{"id":60223,"name":"上海希尔顿酒店","address":"静安华山路250号","price":2688,"score":37,"brand":"希尔顿","city":"上海","starName":"五星级","business":"静安寺地区","location":"31.219306, 121.445427","pic":"https://m.tuniucdn.com/filebroker/cdn/res/92/10/9210e74442aceceaf6e196d61fc3b6b1_w200_h200_c1_t0.jpg"},{"id":60922,"name":"上海虹桥祥源希尔顿酒店","address":"红松东路1116号","price":1108,"score":45,"brand":"希尔顿","city":"上海","starName":"五钻","business":"虹桥地区","location":"31.18746, 121.395312","pic":"https://m.tuniucdn.com/fb3/s1/2n9c/tQRqDTFkHnHzMZiDKjcGV81ekvc_w200_h200_c1_t0.jpg"},{"id":309208,"name":"北京王府井希尔顿酒店","address":"王府井东街8号","price":1679,"score":46,"brand":"希尔顿","city":"北京","starName":"五钻","business":"天安门/王府井地区","location":"39.914539, 116.413392","pic":"https://m.tuniucdn.com/fb2/t1/G6/M00/52/10/Cii-TF3ePt2IX9UEAALb6VYBSmoAAGKMgGsuW8AAtwB147_w200_h200_c1_t0.jpg"},{"id":395434,"name":"北京希尔顿酒店","address":"东三环北路东方路1号","price":350,"score":45,"brand":"希尔顿","city":"北京","starName":"五星级","business":"燕莎/朝阳公园商业区","location":"39.952703, 116.462387","pic":"https://m.tuniucdn.com/fb3/s1/2n9c/3fwNbKGhk6XCrkdVyxwhC5uGpLVy_w200_h200_c1_t0.jpg"},{"id":395702,"name":"北京首都机场希尔顿酒店","address":"首都机场3号航站楼三经路1号","price":222,"score":46,"brand":"希尔顿","city":"北京","starName":"五钻","business":"首都机场/新国展地区","location":"40.048969, 116.619566","pic":"https://m.tuniucdn.com/fb2/t1/G6/M00/52/10/Cii-U13ePtuIMRSjAAFZ58NGQrMAAGKMgADZ1QAAVn_167_w200_h200_c1_t0.jpg"},{"id":615175,"name":"千岛湖滨江希尔顿度假酒店","address":"环湖北路600号","price":1265,"score":47,"brand":"希尔顿","city":"杭州","starName":"五钻","business":"千岛湖镇","location":"29.603634, 119.077596","pic":"https://m.tuniucdn.com/fb3/s1/2n9c/6qzYeUrrXsH5H3cd9bMXLz8MJtT_w200_h200_c1_t0.jpg"},{"id":2351601,"name":"深圳蛇口希尔顿南海酒店","address":"望海路1177号","price":509,"score":47,"brand":"希尔顿","city":"深圳","starName":"五钻","business":"深圳湾口岸/蛇口","location":"22.479373, 113.916013","pic":"https://m.tuniucdn.com/fb2/t1/G6/M00/45/EA/Cii-TF3ZpXOIfa6fAAJjiUOiuYgAAFrtgDtgpQAAmOh799_w200_h200_c1_t0.jpg"},{"id":368701368,"name":"深圳大中华希尔顿酒店","address":"福田深南大道1003号","price":1666,"score":46,"brand":"希尔顿","city":"深圳","starName":"五钻","business":"会展中心/CBD","location":"22.539313, 114.069763","pic":"https://m.tuniucdn.com/fb3/s1/2n9c/4EnHseZ73LXdFJY7DSdJ8xqAcjXe_w200_h200_c1_t0.jpg"},{"id":2048042240,"name":"北京大兴希尔顿酒店","address":"高米店南里18号楼","price":1283,"score":48,"brand":"希尔顿","city":"北京","starName":"五钻","business":"大兴北京新机场地区","location":"39.76875, 116.339199","pic":"https://m.tuniucdn.com/fb3/s1/2n9c/3B32F8zSU2CJCWzs1hoH2o4WcquR_w200_h200_c1_t0.jpg"},{"id":2056105938,"name":"北京通州北投希尔顿酒店","address":"新华东街289号2号楼","price":1068,"score":48,"brand":"希尔顿","city":"北京","starName":"五钻","business":"果园环岛/通州区","location":"39.908805, 116.659748","pic":"https://m.tuniucdn.com/fb3/s1/2n9c/NGKdpec3tZJNUUNWJ5pd67Cp5AY_w200_h200_c1_t0.png"}]
|
|||
|
|
this.total = 271;
|
|||
|
|
this.totalPage = 28;
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
search(location) {
|
|||
|
|
// 发送ajax
|
|||
|
|
this.searchByMap(location);
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
prePage() {
|
|||
|
|
if (this.params.page > 1) {
|
|||
|
|
this.params.page--
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
nextPage() {
|
|||
|
|
if (this.params.page < this.totalPage) {
|
|||
|
|
this.params.page++
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
clickPrice(min, max) {
|
|||
|
|
this.params.minPrice = min;
|
|||
|
|
this.params.maxPrice = max;
|
|||
|
|
},
|
|||
|
|
clickFilter(key, option) {
|
|||
|
|
this.loc = "";
|
|||
|
|
const {...obj} = this.params.filters;
|
|||
|
|
obj[key] = option;
|
|||
|
|
this.params.filters = obj;
|
|||
|
|
},
|
|||
|
|
deleteFilter(k) {
|
|||
|
|
this.loc = "";
|
|||
|
|
const {...obj} = this.params.filters;
|
|||
|
|
delete obj[k];
|
|||
|
|
this.params.filters = obj;
|
|||
|
|
},
|
|||
|
|
location(loc) {
|
|||
|
|
let arr = loc.split(", ");
|
|||
|
|
let json = '[' + arr[1] + ', ' + arr[0] + ']'
|
|||
|
|
return JSON.parse(json);
|
|||
|
|
},
|
|||
|
|
initMarker() {
|
|||
|
|
if (!this.loc) {
|
|||
|
|
this.map.clearMap();
|
|||
|
|
}
|
|||
|
|
this.markHotels();
|
|||
|
|
},
|
|||
|
|
setMapCenter(location){
|
|||
|
|
this.map.setCenter(this.location(location));
|
|||
|
|
},
|
|||
|
|
markHotels(){
|
|||
|
|
this.hotels.forEach((h, i) => {
|
|||
|
|
// 将创建的点标记添加到已有的地图实例：
|
|||
|
|
let marker = new AMap.Marker({
|
|||
|
|
position: this.location(h.location), // 经纬度构成的一维数组[116.39, 39.9]
|
|||
|
|
title: h.name,
|
|||
|
|
offset: new AMap.Pixel(0, 0),
|
|||
|
|
anchor:'bottom-center'
|
|||
|
|
});
|
|||
|
|
marker.vid = h.id;
|
|||
|
|
this.map.add(marker);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
handleMarkerFocus(h) {
|
|||
|
|
this.map.setCenter(this.location(h.location));
|
|||
|
|
let old = this.currentHotel;
|
|||
|
|
let oldMarker = this.map.getAllOverlays("marker").find(m => m.vid === old.id);
|
|||
|
|
if (oldMarker) {
|
|||
|
|
this.updateMarker(oldMarker, "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", "", this.location(old.location), old.id);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.currentHotel = h;
|
|||
|
|
let marker = this.map.getAllOverlays("marker").find(m => m.vid === h.id);
|
|||
|
|
this.updateMarker(marker, "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png", h.name, this.location(h.location), h.id);
|
|||
|
|
},
|
|||
|
|
updateMarker(marker, icon, text, position, id) {
|
|||
|
|
// 自定义点标记内容
|
|||
|
|
var markerContent = document.createElement("div");
|
|||
|
|
|
|||
|
|
// 点标记中的图标
|
|||
|
|
var markerImg = document.createElement("img");
|
|||
|
|
markerImg.className = "markerlnglat";
|
|||
|
|
markerImg.src = icon;
|
|||
|
|
markerImg.setAttribute('width', '25px');
|
|||
|
|
markerImg.setAttribute('height', '34px');
|
|||
|
|
markerContent.appendChild(markerImg);
|
|||
|
|
|
|||
|
|
// 点标记中的文本
|
|||
|
|
if (text) {
|
|||
|
|
var markerSpan = document.createElement("span");
|
|||
|
|
markerSpan.className = 'marker';
|
|||
|
|
markerSpan.innerHTML = text;
|
|||
|
|
markerContent.appendChild(markerSpan);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
marker.setContent(markerContent);
|
|||
|
|
marker.setPosition(position);
|
|||
|
|
marker.vid = id;
|
|||
|
|
},
|
|||
|
|
getGeoLoc(){
|
|||
|
|
this.loading = true;
|
|||
|
|
this.geolocation.getCurrentPosition((status,result) => {
|
|||
|
|
this.loading = false;
|
|||
|
|
if(status === 'complete'){
|
|||
|
|
console.log("successs")
|
|||
|
|
// https://a.amap.com/jsapi/static/image/plugin/point.png
|
|||
|
|
this.addMaker('//a.amap.com/jsapi/static/image/plugin/point.png', result.position.lng,result.position.lat);
|
|||
|
|
if (this.params.page !== 1) {
|
|||
|
|
this.params.page = 1;
|
|||
|
|
this.loc = result.position.lat + ", " + result.position.lng;
|
|||
|
|
} else {
|
|||
|
|
this.searchByMap(result.position.lat + ", " + result.position.lng);
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
console.log("err", status)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
addMaker(iconUrl, lng, lat){
|
|||
|
|
// 创建 AMap.Icon 实例：
|
|||
|
|
let icon = new AMap.Icon({
|
|||
|
|
size: new AMap.Size(25, 25), // 图标尺寸
|
|||
|
|
image: iconUrl, // Icon的图像
|
|||
|
|
imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
|
|||
|
|
imageSize: new AMap.Size(25, 25) // 根据所设置的大小拉伸或压缩图片
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 将 Icon 实例添加到 marker 上:
|
|||
|
|
let marker = new AMap.Marker({
|
|||
|
|
position: new AMap.LngLat(lng, lat),
|
|||
|
|
offset: new AMap.Pixel(0, 0),
|
|||
|
|
icon: icon, // 添加 Icon 实例
|
|||
|
|
title: '北京',
|
|||
|
|
zoom: 13,
|
|||
|
|
anchor:"center"
|
|||
|
|
});
|
|||
|
|
this.map.add(marker);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
remainFilter() {
|
|||
|
|
let keys = Object.keys(this.params.filters);
|
|||
|
|
let obj = {};
|
|||
|
|
Object.keys(this.filterList).forEach(key => {
|
|||
|
|
if (!keys.includes(key) && this.filterList[key].length > 1) {
|
|||
|
|
obj[key] = this.filterList[key];
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
return obj;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|