Spaces:

samlax12
/

food

Running

App Files Files Community

food / index1.html

samlax12

Rename index.html to index1.html

b48fa25 verified about 1 year ago

raw

history blame contribute delete

14.4 kB

	<!doctype html>
	<html lang="zh-CN">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<title>美食探索</title>
	<!-- AMap API -->
	<script>
	window._AMapSecurityConfig = {
	securityJsCode: 'cf71cd668b9003a1144459e461092afb',
	}
	</script>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=11b1daeff703d83adef3e84cd746ab84&plugin=AMap.CitySearch,AMap.PlaceSearch"></script>
	<!-- Font Awesome for icons -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style type="text/css">
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	}

	body {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #f5f5f5;
	}

	.header {
	background: linear-gradient(135deg, #ff7e5f, #feb47b);
	color: white;
	padding: 15px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	z-index: 100;
	}

	.header h1 {
	font-size: 22px;
	font-weight: 600;
	}

	.search-container {
	background: white;
	padding: 15px;
	display: flex;
	align-items: center;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	}

	.search-bar {
	display: flex;
	flex: 1;
	position: relative;
	}

	.search-bar input {
	flex: 1;
	padding: 12px 15px;
	border: 1px solid #e0e0e0;
	border-radius: 24px;
	font-size: 16px;
	outline: none;
	transition: border 0.3s;
	}

	.search-bar input:focus {
	border-color: #ff7e5f;
	}

	.search-bar button {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: #ff7e5f;
	font-size: 18px;
	cursor: pointer;
	}

	.city-selector {
	margin-left: 15px;
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 8px 12px;
	border-radius: 20px;
	background: #f7f7f7;
	transition: background 0.3s;
	}

	.city-selector:hover {
	background: #f0f0f0;
	}

	.main-content {
	display: flex;
	flex: 1;
	overflow: hidden;
	}

	#container {
	flex: 1;
	height: 100%;
	}

	#panel {
	width: 360px;
	background: white;
	overflow-y: auto;
	box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
	padding: 0;
	transition: transform 0.3s;
	}

	.food-categories {
	display: flex;
	overflow-x: auto;
	padding: 15px;
	background: white;
	margin-bottom: 15px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	scrollbar-width: none;
	}

	.food-categories::-webkit-scrollbar {
	display: none;
	}

	.category {
	flex: 0 0 auto;
	margin-right: 15px;
	padding: 8px 15px;
	background: #f7f7f7;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.3s;
	font-size: 14px;
	white-space: nowrap;
	}

	.category.active {
	background: #ff7e5f;
	color: white;
	}

	.category:hover:not(.active) {
	background: #f0f0f0;
	}

	.result-item {
	border-bottom: 1px solid #f0f0f0;
	padding: 15px;
	cursor: pointer;
	transition: background 0.3s;
	}

	.result-item:hover {
	background: #f9f9f9;
	}

	.result-item h3 {
	font-size: 16px;
	margin-bottom: 8px;
	color: #333;
	}

	.result-item p {
	font-size: 14px;
	color: #666;
	margin-bottom: 8px;
	}

	.result-item .rating {
	color: #ff7e5f;
	margin-bottom: 8px;
	}

	.result-item .address {
	display: flex;
	align-items: center;
	font-size: 13px;
	color: #999;
	}

	.result-item .address i {
	margin-right: 5px;
	}

	.loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
	}

	.loading i {
	font-size: 40px;
	color: #ff7e5f;
	animation: spin 1s infinite linear;
	}

	@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
	}

	.no-results {
	padding: 30px;
	text-align: center;
	color: #666;
	}

	.amap-info-content {
	padding: 10px;
	border-radius: 8px;
	}

	/* Mobile Responsive */
	@media (max-width: 768px) {
	.main-content {
	flex-direction: column;
	}

	#container {
	height: 40%;
	}

	#panel {
	width: 100%;
	height: 60%;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	}

	.header h1 {
	font-size: 18px;
	}
	}
	</style>
	</head>
	<body>
	<div class="header">
	<h1>美食探索</h1>
	<div id="current-city" class="city-selector">
	<i class="fas fa-map-marker-alt"></i>
	<span>定位中...</span>
	</div>
	</div>

	<div class="search-container">
	<div class="search-bar">
	<input type="text" id="keyword" placeholder="搜索美食、餐厅" value="美食">
	<button id="search-btn"><i class="fas fa-search"></i></button>
	</div>
	</div>

	<div class="food-categories">
	<div class="category active" data-keyword="美食">全部美食</div>
	<div class="category" data-keyword="火锅">火锅</div>
	<div class="category" data-keyword="烧烤">烧烤</div>
	<div class="category" data-keyword="小吃">特色小吃</div>
	<div class="category" data-keyword="西餐">西餐</div>
	<div class="category" data-keyword="日料">日料</div>
	<div class="category" data-keyword="甜点">甜点</div>
	<div class="category" data-keyword="咖啡">咖啡</div>
	<div class="category" data-keyword="面包">面包</div>
	<div class="category" data-keyword="早餐">早餐</div>
	</div>

	<div class="main-content">
	<div id="container"></div>
	<div id="panel"></div>
	</div>

	<div class="loading">
	<i class="fas fa-spinner"></i>
	</div>

	<script type="text/javascript">
	// 初始化地图
	var map = new AMap.Map("container", {
	resizeEnable: true,
	zoom: 12,
	center: [116.397428, 39.90923] // 默认北京中心
	});

	// 城市信息
	var currentCity = {
	name: '北京',
	adcode: '010'
	};

	// 初始化搜索关键词
	var currentKeyword = '美食';

	// 初始化地点搜索
	var placeSearch = null;

	// 设置城市选择器文本
	function updateCityText() {
	document.querySelector('#current-city span').textContent = currentCity.name;
	}

	// 获取用户所在城市
	function getCityByIP() {
	// 实例化城市查询类
	var citysearch = new AMap.CitySearch();

	// 自动获取用户IP，返回当前城市
	citysearch.getLocalCity(function(status, result) {
	if (status === 'complete' && result.info === 'OK') {
	if (result && result.city && result.bounds) {
	currentCity = {
	name: result.city,
	adcode: result.adcode
	};

	updateCityText();

	// 地图显示当前城市
	map.setBounds(result.bounds);

	// 初始化搜索
	initPlaceSearch();
	}
	} else {
	// 如果IP定位失败，使用默认城市
	updateCityText();
	initPlaceSearch();
	}
	});
	}

	// 初始化POI搜索
	function initPlaceSearch() {
	placeSearch = new AMap.PlaceSearch({
	pageSize: 10,
	pageIndex: 1,
	city: currentCity.adcode,
	citylimit: true,
	map: map,
	autoFitView: true
	});

	// 自定义结果列表
	placeSearch.on('complete', function(results) {
	document.querySelector('.loading').style.display = 'none';
	if (results.info === 'OK') {
	customizeResultList(results.poiList.pois);
	} else {
	document.getElementById('panel').innerHTML = '<div class="no-results">没有找到相关结果</div>';
	}
	});

	// 初始搜索
	searchPOI();
	}

	// 搜索POI
	function searchPOI() {
	if (!placeSearch) {
	return; // 避免在初始化完成前调用
	}

	document.querySelector('.loading').style.display = 'block';
	placeSearch.search(currentKeyword, function(status, result) {
	document.querySelector('.loading').style.display = 'none';
	if (status === 'error' \|\| status === 'no_data') {
	document.getElementById('panel').innerHTML = '<div class="no-results">没有找到相关结果</div>';
	}
	});
	}

	// 自定义结果列表
	function customizeResultList(pois) {
	var panel = document.getElementById('panel');
	panel.innerHTML = '';

	if (!pois \|\| pois.length === 0) {
	panel.innerHTML = '<div class="no-results">没有找到相关结果</div>';
	return;
	}

	pois.forEach(function(poi) {
	var item = document.createElement('div');
	item.className = 'result-item';

	// 随机生成评分 (4.0-5.0)
	var rating = (Math.random() * 1.0 + 4.0).toFixed(1);
	// 随机生成价格 (¥20-¥200)
	var price = Math.floor(Math.random() * 180 + 20);

	// 生成星星
	var stars = '';
	var fullStars = Math.floor(rating);
	var halfStar = rating % 1 >= 0.5;

	for (var i = 0; i < 5; i++) {
	if (i < fullStars) {
	stars += '<i class="fas fa-star"></i>';
	} else if (halfStar && i === fullStars) {
	stars += '<i class="fas fa-star-half-alt"></i>';
	halfStar = false;
	} else {
	stars += '<i class="far fa-star"></i>';
	}
	}

	item.innerHTML = `
	<h3>${poi.name}</h3>
	<div class="rating">${stars} ${rating} · 人均 ¥${price}</div>
	<p>${poi.type \|\| '特色美食'}</p>
	<div class="address"><i class="fas fa-map-marker-alt"></i>${poi.address \|\| poi.location.toString()}</div>
	`;

	item.addEventListener('click', function() {
	map.setCenter(poi.location);
	map.setZoom(15);
	});

	panel.appendChild(item);
	});
	}

	// 搜索按钮点击事件
	document.getElementById('search-btn').addEventListener('click', function() {
	var keyword = document.getElementById('keyword').value.trim();
	if (keyword) {
	currentKeyword = keyword;
	searchPOI();

	// 更新分类选中状态
	document.querySelectorAll('.category').forEach(function(cat) {
	cat.classList.remove('active');
	if (cat.dataset.keyword === keyword) {
	cat.classList.add('active');
	}
	});
	}
	});

	// 回车键搜索
	document.getElementById('keyword').addEventListener('keyup', function(e) {
	if (e.key === 'Enter') {
	document.getElementById('search-btn').click();
	}
	});

	// 分类点击事件
	document.querySelectorAll('.category').forEach(function(category) {
	category.addEventListener('click', function() {
	document.querySelectorAll('.category').forEach(function(cat) {
	cat.classList.remove('active');
	});
	this.classList.add('active');

	currentKeyword = this.dataset.keyword;
	document.getElementById('keyword').value = currentKeyword;
	searchPOI();
	});
	});

	// 城市选择器点击事件
	document.getElementById('current-city').addEventListener('click', function() {
	// 这里可以添加城市选择功能
	alert('城市选择功能将在未来版本添加');
	});

	// 页面加载完成后执行
	window.onload = function() {
	getCityByIP();
	};
	</script>
	</body>
	</html>