+
搜索
@@ -143,7 +150,10 @@
detailContent: '',
imgList: '',
isCanBuy: false,
- tel: ''
+ tel: '',
+ keyword: '',
+ isSearch: false,
+ searchList: []
};
},
mounted() {
@@ -209,7 +219,7 @@
},
// 根据code、热点分类获取热点
getSpotsByCategory(index) {
- this.typeIndex = index
+ if (index > -1) this.typeIndex = index
this.post({
code: this.areaList[this.areaIndex].code,
category_id: this.mapType[this.typeIndex].id
@@ -227,6 +237,51 @@
if (this.maps.length > 0) this.setMarkers()
})
},
+ // 搜索
+ search() {
+ this.post({
+ code: this.areaList[this.areaIndex].code,
+ category_id: this.mapType[this.typeIndex].id,
+ keyword: this.keyword
+ }, '/api/emap/getSpotsByCategory').then(res => {
+ this.searchList = res.data
+ })
+ },
+ // 点击搜索结果
+ searchClick(item) {
+ this.isSearch = false
+ // 设置地图中心
+ this.changeMapCenter(JSON.parse(item.poi))
+ // 查找当前搜索结果对应的点位数据
+ const markerData = this.maps.find(marker => {
+ // 根据id或name匹配对应的点位（根据实际数据结构调整）
+ return marker.id === item.id || marker.name === item.name;
+ });
+
+ if (markerData) {
+ // 构造模拟的标记点点击事件数据
+ const mockEvent = {
+ geometry: {
+ id: markerData.goods ? markerData.goods.id : '',
+ genre: markerData.goods ? markerData.goods.genre : '',
+ name: markerData.name,
+ address: markerData.address,
+ audioSrc: markerData.audio_file,
+ spotId: markerData.id,
+ detailContent: markerData.detail_content,
+ imgList: markerData.album_images,
+ tel: markerData.tel,
+ position: new TMap.LatLng(
+ JSON.parse(markerData.poi)[1],
+ JSON.parse(markerData.poi)[0]
+ )
+ }
+ };
+
+ // 触发标记点点击事件
+ this.markerClick(mockEvent);
+ }
+ },
// 查询是否有我的线路
getMyLine() {
this.post({
@@ -277,7 +332,7 @@
// 初始化瓦片
// 瓦片图需要切好每个位置的图
// x,y,z 为上图的坐标
-
+
let imageTile = new TMap.ImageTileLayer({
getTileUrl: (x, y, z) => {
//拼接瓦片URL
@@ -337,7 +392,7 @@
this.maps.forEach(item => {
markers.push({
"styleId": 'marker',
- id: item.goods.id, // 产品id
+ id: item.goods ? item.goods.id : '', // 产品id
genre: item.goods ? item.goods.genre : '', // 产品类型
name: item.name, // 产品名称
address: item.address, // 详情地址,
@@ -352,7 +407,8 @@
labels.push({
id: 'label', // 点图形数据的标志信息
styleId: 'label', // 样式id
- position: new TMap.LatLng(JSON.parse(item.poi)[1], JSON.parse(item.poi)[0]), // 标注点位置
+ position: new TMap.LatLng(JSON.parse(item.poi)[1], JSON.parse(item.poi)[
+ 0]), // 标注点位置
content: item.name, // 标注文本
properties: {
// 标注点的属性数据
@@ -446,7 +502,7 @@
this.detailContent = evt.geometry.detailContent
this.imgList = evt.geometry.imgList
this.tel = evt.geometry.tel
-
+
if (['ticket'].includes(evt.geometry.genre)) {
// 景点 酒景
this.get({
@@ -455,11 +511,11 @@
}, '/api/product/get_product_detail').then(res => {
if (res.data) {
// 酒店类型展示购买按钮
- if(evt.geometry.genre == 'ticket') {
+ if (evt.geometry.genre == 'ticket') {
this.isCanBuy = true
this.productType = true
}
-
+
this.detailInfo = res.data
this.detailInfo.genre = evt.geometry.genre
this.detailShow = true
@@ -704,15 +760,42 @@
width: 100%;
height: 100vh;
}
-
+
.search-box {
width: 750px;
height: 93px;
background: #FFFFFF;
- position: fixed;
- top: 0;
- left: 0;
- z-index: 9999;
+
+ input {
+ width: 593px;
+ height: 60px;
+ background: #F2F2F2;
+ border-radius: 13px;
+ font-weight: 500;
+ font-size: 27px;
+ color: #999999;
+ border: none;
+ padding: 0 20px;
+ }
+
+ .search-text {
+ font-weight: bold;
+ font-size: 27px;
+ color: #00AEA0;
+ margin-right: 10px;
+ }
+ }
+
+ .search-result {
+ width: 100%;
+ padding: 0 28px;
+
+ .search-item {
+ font-weight: 500;
+ font-size: 27px;
+ color: #111111;
+ margin: 30px 0;
+ }
}
.type-box {
@@ -742,7 +825,7 @@
background: #00AEA0;
color: #fff;
}
-
+
.search {
padding-right: 21px;
font-weight: bold;
@@ -753,7 +836,7 @@
align-items: center;
margin-right: 18px;
white-space: nowrap;
-
+
img {
width: 25px;
height: 25px;