Spaces:

samlax12
/

food

Running

App Files Files Community

food / index33.html

samlax12

Rename index.html to index33.html

db0acaa verified 12 months ago

raw

history blame contribute delete

62 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,AMap.Geocoder"></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">
	:root {
	--primary-color: #ff6b6b;
	--primary-gradient: linear-gradient(135deg, #ff6b6b, #ff8e8e);
	--secondary-color: #4ecdc4;
	--dark-color: #292f36;
	--light-color: #f7f7f7;
	--text-color: #333;
	--text-secondary: #666;
	--border-radius: 12px;
	--box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
	--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	}

	* {
	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: var(--light-color);
	color: var(--text-color);
	}

	.header {
	background: var(--primary-gradient);
	color: white;
	padding: 15px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: var(--box-shadow);
	z-index: 100;
	}

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

	.header-actions {
	display: flex;
	gap: 15px;
	}

	.btn-icon {
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: white;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: var(--transition);
	}

	.btn-icon:hover {
	background: rgba(255, 255, 255, 0.3);
	}

	.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 20px;
	border: 1px solid #e0e0e0;
	border-radius: 24px;
	font-size: 16px;
	outline: none;
	transition: var(--transition);
	}

	.search-bar input:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
	}

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

	.search-bar button:hover {
	color: var(--secondary-color);
	}

	.city-selector {
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 8px 16px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.2);
	transition: var(--transition);
	color: white;
	font-weight: 500;
	}

	.city-selector i {
	margin-right: 6px;
	}

	.city-selector:hover {
	background: rgba(255, 255, 255, 0.3);
	}

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

	#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: var(--transition);
	z-index: 10;
	}

	.food-categories {
	display: flex;
	overflow-x: auto;
	padding: 15px;
	background: white;
	margin-bottom: 10px;
	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: 10px;
	padding: 8px 16px;
	background: var(--light-color);
	border-radius: 20px;
	cursor: pointer;
	transition: var(--transition);
	font-size: 14px;
	white-space: nowrap;
	}

	.category.active {
	background: var(--primary-color);
	color: white;
	}

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

	.result-item {
	border-bottom: 1px solid #f0f0f0;
	padding: 15px;
	cursor: pointer;
	transition: var(--transition);
	position: relative;
	}

	.result-item:hover {
	background: var(--light-color);
	}

	.result-item h3 {
	font-size: 16px;
	margin-bottom: 8px;
	color: var(--text-color);
	padding-right: 30px;
	}

	.result-item p {
	font-size: 14px;
	color: var(--text-secondary);
	margin-bottom: 8px;
	}

	.result-item .rating {
	color: var(--primary-color);
	margin-bottom: 8px;
	}

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

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

	.favorite-btn {
	position: absolute;
	top: 15px;
	right: 15px;
	background: none;
	border: none;
	color: #ccc;
	font-size: 18px;
	cursor: pointer;
	transition: var(--transition);
	}

	.favorite-btn:hover, .favorite-btn.active {
	color: #ffcc00;
	}

	.favorite-btn.active {
	transform: scale(1.2);
	}

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

	.loading i {
	font-size: 40px;
	color: var(--primary-color);
	animation: spin 1s infinite linear;
	}

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

	.no-results {
	padding: 30px;
	text-align: center;
	color: var(--text-secondary);
	}

	.city-modal, .share-modal, .favorites-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);
	}

	.city-modal.active, .share-modal.active, .favorites-modal.active {
	opacity: 1;
	visibility: visible;
	}

	.modal-content {
	background: white;
	border-radius: var(--border-radius);
	width: 90%;
	max-width: 500px;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: var(--box-shadow);
	transform: translateY(-20px);
	transition: transform 0.3s ease;
	}

	.city-modal.active .modal-content,
	.share-modal.active .modal-content,
	.favorites-modal.active .modal-content {
	transform: translateY(0);
	}

	.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	border-bottom: 1px solid #eee;
	}

	.modal-header h2 {
	font-size: 18px;
	font-weight: 600;
	}

	.modal-close {
	background: none;
	border: none;
	font-size: 22px;
	cursor: pointer;
	color: var(--text-secondary);
	}

	.modal-body {
	padding: 20px;
	}

	.city-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	}

	.city-item {
	padding: 10px;
	text-align: center;
	background: var(--light-color);
	border-radius: 8px;
	cursor: pointer;
	transition: var(--transition);
	}

	.city-item:hover {
	background: var(--primary-color);
	color: white;
	}

	.share-form {
	display: flex;
	flex-direction: column;
	gap: 15px;
	}

	.form-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
	}

	.form-group label {
	font-size: 14px;
	font-weight: 500;
	}

	.form-group input, .form-group textarea, .form-group select {
	padding: 10px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	font-size: 14px;
	transition: var(--transition);
	}

	.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
	border-color: var(--primary-color);
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
	}

	.btn-submit {
	background: var(--primary-color);
	color: white;
	border: none;
	padding: 12px;
	border-radius: 8px;
	font-weight: 500;
	cursor: pointer;
	transition: var(--transition);
	}

	.btn-submit:hover {
	background: #ff5252;
	}

	.share-preview {
	display: flex;
	align-items: center;
	background: var(--light-color);
	padding: 10px;
	border-radius: 8px;
	margin-bottom: 15px;
	}

	.share-preview-img {
	width: 60px;
	height: 60px;
	background: #ddd;
	border-radius: 8px;
	margin-right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	}

	.share-preview-info h3 {
	font-size: 16px;
	margin-bottom: 5px;
	}

	.share-preview-info p {
	font-size: 13px;
	color: var(--text-secondary);
	}

	.favorites-list {
	display: flex;
	flex-direction: column;
	}

	.favorites-item {
	display: flex;
	padding: 15px;
	border-bottom: 1px solid #eee;
	cursor: pointer;
	transition: var(--transition);
	}

	.favorites-item:hover {
	background: var(--light-color);
	}

	.favorites-info {
	flex: 1;
	}

	.favorites-info h3 {
	font-size: 16px;
	margin-bottom: 5px;
	}

	.favorites-info p {
	font-size: 13px;
	color: var(--text-secondary);
	}

	.favorites-actions {
	display: flex;
	align-items: center;
	}

	.favorites-actions button {
	background: none;
	border: none;
	font-size: 16px;
	color: var(--text-secondary);
	cursor: pointer;
	padding: 5px;
	transition: var(--transition);
	}

	.favorites-actions button:hover {
	color: var(--primary-color);
	}

	.tabs {
	display: flex;
	border-bottom: 1px solid #eee;
	}

	.tab {
	padding: 15px;
	cursor: pointer;
	transition: var(--transition);
	flex: 1;
	text-align: center;
	color: var(--text-secondary);
	font-weight: 500;
	}

	.tab.active {
	color: var(--primary-color);
	border-bottom: 2px solid var(--primary-color);
	}

	.tab-content {
	display: none;
	}

	.tab-content.active {
	display: block;
	}

	.shared-food-item {
	padding: 15px;
	border-bottom: 1px solid #eee;
	}

	.shared-food-header {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	}

	.shared-user-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #ddd;
	margin-right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	}

	.shared-user-info {
	flex: 1;
	}

	.shared-user-name {
	font-weight: 500;
	font-size: 14px;
	}

	.shared-time {
	font-size: 12px;
	color: #999;
	}

	.shared-food-content p {
	margin-bottom: 10px;
	font-size: 14px;
	}

	.shared-food-image {
	width: 100%;
	height: 200px;
	border-radius: 8px;
	background: #eee;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	}

	.shared-food-actions {
	display: flex;
	justify-content: space-between;
	}

	.shared-food-actions button {
	background: none;
	border: none;
	display: flex;
	align-items: center;
	color: var(--text-secondary);
	font-size: 14px;
	cursor: pointer;
	transition: var(--transition);
	}

	.shared-food-actions button i {
	margin-right: 5px;
	}

	.shared-food-actions button:hover {
	color: var(--primary-color);
	}

	.toast {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 10px 20px;
	border-radius: 20px;
	font-size: 14px;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);
	}

	.toast.show {
	opacity: 1;
	visibility: visible;
	}

	.fab {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--primary-color);
	color: white;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	cursor: pointer;
	z-index: 50;
	transition: var(--transition);
	}

	.fab:hover {
	background: #ff5252;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	}

	/* 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;
	}

	.city-list {
	grid-template-columns: repeat(2, 1fr);
	}
	}

	/* Custom Info Window */
	.custom-info-window {
	background: white;
	border-radius: 12px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	padding: 15px;
	width: 280px;
	}

	.info-window-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	}

	.info-window-title {
	font-weight: 600;
	font-size: 16px;
	}

	.info-window-favorite {
	color: #ccc;
	cursor: pointer;
	transition: var(--transition);
	}

	.info-window-favorite:hover, .info-window-favorite.active {
	color: #ffcc00;
	}

	.info-window-body {
	font-size: 14px;
	}

	.info-window-rating {
	color: var(--primary-color);
	margin-bottom: 8px;
	}

	.info-window-address {
	color: #999;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	}

	.info-window-address i {
	margin-right: 5px;
	}

	.info-window-actions {
	display: flex;
	gap: 10px;
	margin-top: 10px;
	}

	.info-window-btn {
	flex: 1;
	padding: 8px;
	border: none;
	border-radius: 6px;
	font-size: 13px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
	}

	.info-window-btn i {
	margin-right: 5px;
	}

	.info-window-btn.navigate {
	background: var(--secondary-color);
	color: white;
	}

	.info-window-btn.share {
	background: var(--light-color);
	color: var(--text-color);
	}

	.info-window-btn:hover {
	opacity: 0.9;
	}
	</style>
	</head>
	<body>
	<div class="header">
	<h1>美食探索+</h1>
	<div class="header-actions">
	<div id="current-city" class="city-selector">
	<i class="fas fa-map-marker-alt"></i>
	<span>定位中...</span>
	</div>
	<button id="favorites-btn" class="btn-icon">
	<i class="fas fa-heart"></i>
	</button>
	</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 class="tabs">
	<div class="tab active" data-tab="results">搜索结果</div>
	<div class="tab" data-tab="community">美食分享</div>
	</div>
	<div id="results-content" class="tab-content active"></div>
	<div id="community-content" class="tab-content">
	<!-- 社区分享的美食内容将动态加载到这里 -->
	</div>
	</div>
	</div>

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

	<!-- 城市选择模态框 -->
	<div id="city-modal" class="city-modal">
	<div class="modal-content">
	<div class="modal-header">
	<h2>选择城市</h2>
	<button class="modal-close">×</button>
	</div>
	<div class="modal-body">
	<div class="city-list">
	<div class="city-item" data-city="北京" data-adcode="010">北京</div>
	<div class="city-item" data-city="上海" data-adcode="021">上海</div>
	<div class="city-item" data-city="广州" data-adcode="020">广州</div>
	<div class="city-item" data-city="深圳" data-adcode="0755">深圳</div>
	<div class="city-item" data-city="杭州" data-adcode="0571">杭州</div>
	<div class="city-item" data-city="南京" data-adcode="025">南京</div>
	<div class="city-item" data-city="武汉" data-adcode="027">武汉</div>
	<div class="city-item" data-city="成都" data-adcode="028">成都</div>
	<div class="city-item" data-city="重庆" data-adcode="023">重庆</div>
	<div class="city-item" data-city="西安" data-adcode="029">西安</div>
	<div class="city-item" data-city="天津" data-adcode="022">天津</div>
	<div class="city-item" data-city="苏州" data-adcode="0512">苏州</div>
	<div class="city-item" data-city="厦门" data-adcode="0592">厦门</div>
	<div class="city-item" data-city="青岛" data-adcode="0532">青岛</div>
	<div class="city-item" data-city="大连" data-adcode="0411">大连</div>
	</div>
	</div>
	</div>
	</div>

	<!-- 美食分享模态框 -->
	<div id="share-modal" class="share-modal">
	<div class="modal-content">
	<div class="modal-header">
	<h2>分享美食</h2>
	<button class="modal-close">×</button>
	</div>
	<div class="modal-body">
	<div id="share-preview" class="share-preview">
	<div class="share-preview-img">
	<i class="fas fa-utensils"></i>
	</div>
	<div class="share-preview-info">
	<h3>未选择地点</h3>
	<p>请先在地图上选择一个地点</p>
	</div>
	</div>
	<form id="share-form" class="share-form">
	<div class="form-group">
	<label for="share-rating">评分</label>
	<select id="share-rating" required>
	<option value="5">5分 - 超赞</option>
	<option value="4" selected>4分 - 很好</option>
	<option value="3">3分 - 一般</option>
	<option value="2">2分 - 较差</option>
	<option value="1">1分 - 很差</option>
	</select>
	</div>
	<div class="form-group">
	<label for="share-comments">评价</label>
	<textarea id="share-comments" rows="4" placeholder="分享您的用餐体验..." required></textarea>
	</div>
	<div class="form-group">
	<label for="share-image">上传图片</label>
	<input type="file" id="share-image" accept="image/*">
	</div>
	<button type="submit" class="btn-submit">发布分享</button>
	</form>
	</div>
	</div>
	</div>

	<!-- 收藏夹模态框 -->
	<div id="favorites-modal" class="favorites-modal">
	<div class="modal-content">
	<div class="modal-header">
	<h2>我的收藏</h2>
	<button class="modal-close">×</button>
	</div>
	<div class="modal-body">
	<div id="favorites-list" class="favorites-list">
	<!-- 收藏的地点将动态加载到这里 -->
	</div>
	<div id="empty-favorites" class="no-results">
	<p>您还没有收藏任何地点</p>
	</div>
	</div>
	</div>
	</div>

	<!-- 添加美食分享的悬浮按钮 -->
	<div id="add-share-btn" class="fab">
	<i class="fas fa-plus"></i>
	</div>

	<!-- 提示消息 -->
	<div id="toast" class="toast"></div>

	<script type="text/javascript">
	// 初始化全局变量
	var map = null;
	var placeSearch = null;
	var infoWindow = null;
	var markers = [];
	var favorites = JSON.parse(localStorage.getItem('foodExplorerFavorites')) \|\| [];
	var sharedPosts = JSON.parse(localStorage.getItem('foodExplorerSharedPosts')) \|\| [];
	var currentPOI = null;

	// 定义全局分页变量
	var currentPage = 1;
	var currentTotalPages = 1;
	var isLoading = false;

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

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

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

	// 创建自定义信息窗体
	infoWindow = new AMap.InfoWindow({
	isCustom: true,
	autoMove: true,
	offset: new AMap.Pixel(0, -40)
	});

	// 获取用户位置
	getCityByIP();

	// 添加地图控件
	map.plugin(['AMap.ToolBar', 'AMap.Scale'], function() {
	map.addControl(new AMap.ToolBar());
	map.addControl(new AMap.Scale());
	});

	// 点击地图关闭信息窗体
	map.on('click', function() {
	infoWindow.close();
	});
	}

	// 设置城市选择器文本
	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();

	// 加载社区分享内容
	loadCommunityContent();
	}
	} else {
	// 如果IP定位失败，使用默认城市
	updateCityText();
	initPlaceSearch();
	loadCommunityContent();
	}
	});
	}

	// 初始化POI搜索
	function initPlaceSearch() {
	placeSearch = new AMap.PlaceSearch({
	pageSize: 100, // 增加到100条结果每页
	pageIndex: 1,
	city: currentCity.adcode,
	citylimit: true,
	autoFitView: true,
	extensions: 'all' // 请求扩展信息
	});

	// 自定义结果列表
	placeSearch.on('complete', function(results) {
	document.querySelector('.loading').style.display = 'none';
	if (results.info === 'OK') {
	customizeResultList(results.poiList.pois);
	addMarkersToMap(results.poiList.pois);

	// 保存总页数用于分页加载
	currentTotalPages = Math.ceil(results.poiList.count / results.poiList.pageSize);
	currentPage = 1;
	} else {
	document.getElementById('results-content').innerHTML = '<div class="no-results">没有找到相关结果</div>';
	}
	});

	// 初始搜索
	searchPOI();
	}

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

	// 清除原有标记点
	clearMarkers();

	document.querySelector('.loading').style.display = 'block';
	placeSearch.setCity(currentCity.adcode);
	placeSearch.setType('餐饮');
	placeSearch.setPageIndex(1); // 重置到第一页
	currentPage = 1;

	// 注意：不使用setRadius，因为在AMap 2.0中该方法不可用
	// 使用搜索关键词直接搜索
	placeSearch.search(currentKeyword, function(status, result) {
	document.querySelector('.loading').style.display = 'none';
	if (status === 'error' \|\| status === 'no_data') {
	document.getElementById('results-content').innerHTML = '<div class="no-results">没有找到相关结果</div>';
	}
	});
	}

	// 搜索更多结果（下一页）
	function searchMorePOI() {
	if (isLoading \|\| currentPage >= currentTotalPages) return;

	isLoading = true;
	document.querySelector('.loading').style.display = 'block';

	currentPage++;
	placeSearch.setPageIndex(currentPage);

	placeSearch.search(currentKeyword, function(status, result) {
	document.querySelector('.loading').style.display = 'none';
	isLoading = false;

	if (status === 'complete' && result.info === 'OK') {
	// 追加结果而不是替换
	appendResultList(result.poiList.pois);
	addMarkersToMap(result.poiList.pois, true); // true表示追加而非替换
	}
	});
	}

	// 清除地图标记点
	function clearMarkers() {
	if (markers.length > 0) {
	map.remove(markers);
	markers = [];
	}
	}

	// 在地图上添加标记点
	function addMarkersToMap(pois, append = false) {
	if (!append) {
	clearMarkers();
	}

	pois.forEach(function(poi) {
	var marker = new AMap.Marker({
	position: poi.location,
	title: poi.name,
	map: map
	});

	marker.on('click', function() {
	showInfoWindow(poi);
	currentPOI = poi;
	});

	markers.push(marker);
	});
	}

	// 显示自定义信息窗体
	function showInfoWindow(poi) {
	// 随机生成评分和价格
	var rating = (Math.random() * 1.0 + 4.0).toFixed(1);
	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>';
	}
	}

	// 检查是否已收藏
	var isFavorite = favorites.some(function(fav) {
	return fav.id === poi.id;
	});

	// 创建信息窗体内容
	var content = `
	<div class="custom-info-window">
	<div class="info-window-header">
	<div class="info-window-title">${poi.name}</div>
	<div class="info-window-favorite ${isFavorite ? 'active' : ''}" onclick="toggleFavorite(event)">
	<i class="fas fa-heart"></i>
	</div>
	</div>
	<div class="info-window-body">
	<div class="info-window-rating">${stars} ${rating} · 人均 ¥${price}</div>
	<div class="info-window-address"><i class="fas fa-map-marker-alt"></i>${poi.address \|\| poi.location.toString()}</div>
	<div class="info-window-actions">
	<button class="info-window-btn navigate" onclick="navigateTo()"><i class="fas fa-directions"></i>导航</button>
	<button class="info-window-btn share" onclick="openShareModal()"><i class="fas fa-share-alt"></i>分享</button>
	</div>
	</div>
	</div>
	`;

	infoWindow.setContent(content);
	infoWindow.open(map, poi.location);
	}

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

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

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

	// 随机生成评分和价格
	var rating = (Math.random() * 1.0 + 4.0).toFixed(1);
	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>';
	}
	}

	// 检查是否已收藏
	var isFavorite = favorites.some(function(fav) {
	return fav.id === poi.id;
	});

	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>
	<button class="favorite-btn ${isFavorite ? 'active' : ''}" data-id="${poi.id}">
	<i class="fas fa-heart"></i>
	</button>
	`;

	// 点击结果项显示信息窗口
	item.addEventListener('click', function(e) {
	if (!e.target.closest('.favorite-btn')) {
	map.setCenter(poi.location);
	map.setZoom(15);
	showInfoWindow(poi);
	currentPOI = poi;
	}
	});

	// 收藏按钮点击事件
	var favBtn = item.querySelector('.favorite-btn');
	favBtn.addEventListener('click', function(e) {
	e.stopPropagation();
	var id = this.getAttribute('data-id');
	toggleFavoriteById(id, poi, this);
	});

	resultsContent.appendChild(item);
	});
	}

	// 追加结果到列表
	function appendResultList(pois) {
	var resultsContent = document.getElementById('results-content');

	if (!pois \|\| pois.length === 0) return;

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

	// 随机生成评分和价格
	var rating = (Math.random() * 1.0 + 4.0).toFixed(1);
	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>';
	}
	}

	// 检查是否已收藏
	var isFavorite = favorites.some(function(fav) {
	return fav.id === poi.id;
	});

	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>
	<button class="favorite-btn ${isFavorite ? 'active' : ''}" data-id="${poi.id}">
	<i class="fas fa-heart"></i>
	</button>
	`;

	// 点击结果项显示信息窗口
	item.addEventListener('click', function(e) {
	if (!e.target.closest('.favorite-btn')) {
	map.setCenter(poi.location);
	map.setZoom(15);
	showInfoWindow(poi);
	currentPOI = poi;
	}
	});

	// 收藏按钮点击事件
	var favBtn = item.querySelector('.favorite-btn');
	favBtn.addEventListener('click', function(e) {
	e.stopPropagation();
	var id = this.getAttribute('data-id');
	toggleFavoriteById(id, poi, this);
	});

	resultsContent.appendChild(item);
	});
	}

	// 切换收藏状态
	function toggleFavorite(event) {
	event.stopPropagation();
	if (!currentPOI) return;

	var favoriteBtn = event.currentTarget;
	var isFavorite = favoriteBtn.classList.contains('active');

	if (isFavorite) {
	// 取消收藏
	favorites = favorites.filter(function(fav) {
	return fav.id !== currentPOI.id;
	});
	favoriteBtn.classList.remove('active');
	showToast('已取消收藏');
	} else {
	// 添加收藏
	favorites.push({
	id: currentPOI.id,
	name: currentPOI.name,
	address: currentPOI.address \|\| currentPOI.location.toString(),
	location: [currentPOI.location.lng, currentPOI.location.lat],
	type: currentPOI.type \|\| '特色美食'
	});
	favoriteBtn.classList.add('active');
	showToast('已添加到收藏');
	}

	// 更新本地存储
	localStorage.setItem('foodExplorerFavorites', JSON.stringify(favorites));

	// 更新结果列表中的收藏状态
	updateResultListFavoriteStatus();
	}

	// 根据ID切换收藏状态
	function toggleFavoriteById(id, poi, button) {
	var isFavorite = button.classList.contains('active');

	if (isFavorite) {
	// 取消收藏
	favorites = favorites.filter(function(fav) {
	return fav.id !== id;
	});
	button.classList.remove('active');
	showToast('已取消收藏');
	} else {
	// 添加收藏
	favorites.push({
	id: id,
	name: poi.name,
	address: poi.address \|\| poi.location.toString(),
	location: [poi.location.lng, poi.location.lat],
	type: poi.type \|\| '特色美食'
	});
	button.classList.add('active');
	showToast('已添加到收藏');
	}

	// 更新本地存储
	localStorage.setItem('foodExplorerFavorites', JSON.stringify(favorites));

	// 如果信息窗口正在显示该POI，也更新其收藏状态
	if (currentPOI && currentPOI.id === id && infoWindow.getIsOpen()) {
	var favoriteBtn = document.querySelector('.info-window-favorite');
	if (isFavorite) {
	favoriteBtn.classList.remove('active');
	} else {
	favoriteBtn.classList.add('active');
	}
	}
	}

	// 更新结果列表中的收藏状态
	function updateResultListFavoriteStatus() {
	var favBtns = document.querySelectorAll('.result-item .favorite-btn');
	favBtns.forEach(function(btn) {
	var id = btn.getAttribute('data-id');
	var isFavorite = favorites.some(function(fav) {
	return fav.id === id;
	});

	if (isFavorite) {
	btn.classList.add('active');
	} else {
	btn.classList.remove('active');
	}
	});
	}

	// 显示收藏列表
	function showFavorites() {
	var favoritesList = document.getElementById('favorites-list');
	var emptyFavorites = document.getElementById('empty-favorites');

	favoritesList.innerHTML = '';

	if (favorites.length === 0) {
	favoritesList.style.display = 'none';
	emptyFavorites.style.display = 'block';
	return;
	}

	favoritesList.style.display = 'block';
	emptyFavorites.style.display = 'none';

	favorites.forEach(function(fav) {
	var item = document.createElement('div');
	item.className = 'favorites-item';

	item.innerHTML = `
	<div class="favorites-info">
	<h3>${fav.name}</h3>
	<p>${fav.type}</p>
	<p class="address"><i class="fas fa-map-marker-alt"></i>${fav.address}</p>
	</div>
	<div class="favorites-actions">
	<button class="delete-favorite" data-id="${fav.id}"><i class="fas fa-trash"></i></button>
	</div>
	`;

	// 点击收藏项，定位到地图
	item.addEventListener('click', function(e) {
	if (!e.target.closest('.delete-favorite')) {
	var location = new AMap.LngLat(fav.location[0], fav.location[1]);
	map.setCenter(location);
	map.setZoom(15);

	// 创建临时POI对象用于显示信息窗体
	var tempPOI = {
	id: fav.id,
	name: fav.name,
	address: fav.address,
	location: location,
	type: fav.type
	};

	showInfoWindow(tempPOI);
	currentPOI = tempPOI;

	// 关闭收藏夹模态框
	closeModal('favorites-modal');
	}
	});

	// 删除收藏按钮点击事件
	var deleteBtn = item.querySelector('.delete-favorite');
	deleteBtn.addEventListener('click', function(e) {
	e.stopPropagation();
	var id = this.getAttribute('data-id');

	// 从收藏列表中移除
	favorites = favorites.filter(function(fav) {
	return fav.id !== id;
	});

	// 更新本地存储
	localStorage.setItem('foodExplorerFavorites', JSON.stringify(favorites));

	// 从DOM中移除
	item.remove();

	// 更新结果列表中的收藏状态
	updateResultListFavoriteStatus();

	// 如果收藏列表为空，显示空提示
	if (favorites.length === 0) {
	favoritesList.style.display = 'none';
	emptyFavorites.style.display = 'block';
	}

	showToast('已从收藏中移除');
	});

	favoritesList.appendChild(item);
	});
	}

	// 导航功能
	function navigateTo() {
	if (!currentPOI) return;

	// 构建导航URL
	var url = `https://uri.amap.com/navigation?to=${currentPOI.location.lng},${currentPOI.location.lat},${encodeURIComponent(currentPOI.name)}&mode=car&src=myapp&callnative=1`;

	// 打开导航
	window.open(url, '_blank');
	}

	// 加载社区分享内容
	function loadCommunityContent() {
	var communityContent = document.getElementById('community-content');

	// 筛选当前城市的分享
	var cityPosts = sharedPosts.filter(function(post) {
	return post.city === currentCity.name;
	});

	if (cityPosts.length === 0) {
	communityContent.innerHTML = '<div class="no-results">暂无分享内容</div>';
	return;
	}

	communityContent.innerHTML = '';

	// 按时间倒序排列
	cityPosts.sort(function(a, b) {
	return new Date(b.time) - new Date(a.time);
	});

	cityPosts.forEach(function(post) {
	var item = document.createElement('div');
	item.className = 'shared-food-item';

	// 生成星星
	var stars = '';
	for (var i = 0; i < 5; i++) {
	if (i < post.rating) {
	stars += '<i class="fas fa-star"></i>';
	} else {
	stars += '<i class="far fa-star"></i>';
	}
	}

	// 格式化时间
	var postTime = new Date(post.time);
	var timeString = postTime.toLocaleDateString('zh-CN') + ' ' + postTime.toLocaleTimeString('zh-CN', {hour: '2-digit', minute:'2-digit'});

	item.innerHTML = `
	<div class="shared-food-header">
	<div class="shared-user-avatar">
	<i class="fas fa-user"></i>
	</div>
	<div class="shared-user-info">
	<div class="shared-user-name">美食爱好者</div>
	<div class="shared-time">${timeString}</div>
	</div>
	</div>
	<div class="shared-food-content">
	<h3>${post.name}</h3>
	<div class="rating">${stars} · ${post.address}</div>
	<p>${post.comments}</p>
	${post.image ? `<div class="shared-food-image" style="background-image: url(${post.image}); background-size: cover;"></div>` : ''}
	</div>
	<div class="shared-food-actions">
	<button class="like-btn"><i class="far fa-thumbs-up"></i> 点赞</button>
	<button class="comment-btn"><i class="far fa-comment"></i> 评论</button>
	<button class="navigate-btn" data-lng="${post.location[0]}" data-lat="${post.location[1]}" data-name="${post.name}"><i class="fas fa-map-marker-alt"></i> 查看位置</button>
	</div>
	`;

	// 点击查看位置按钮
	var navigateBtn = item.querySelector('.navigate-btn');
	navigateBtn.addEventListener('click', function() {
	var lng = parseFloat(this.getAttribute('data-lng'));
	var lat = parseFloat(this.getAttribute('data-lat'));
	var name = this.getAttribute('data-name');

	var location = new AMap.LngLat(lng, lat);
	map.setCenter(location);
	map.setZoom(15);

	// 创建临时POI对象用于显示信息窗体
	var tempPOI = {
	id: 'share_' + Date.now(),
	name: name,
	address: post.address,
	location: location,
	type: '分享的美食'
	};

	showInfoWindow(tempPOI);
	currentPOI = tempPOI;

	// 切换到搜索结果标签
	switchTab('results');
	});

	// 点赞按钮点击事件
	var likeBtn = item.querySelector('.like-btn');
	likeBtn.addEventListener('click', function() {
	if (this.classList.contains('active')) {
	this.classList.remove('active');
	this.innerHTML = '<i class="far fa-thumbs-up"></i> 点赞';
	} else {
	this.classList.add('active');
	this.innerHTML = '<i class="fas fa-thumbs-up"></i> 已点赞';
	showToast('谢谢您的点赞！');
	}
	});

	// 评论按钮点击事件
	var commentBtn = item.querySelector('.comment-btn');
	commentBtn.addEventListener('click', function() {
	showToast('评论功能即将上线');
	});

	communityContent.appendChild(item);
	});
	}

	// 分享美食
	function shareFood() {
	if (!currentPOI) {
	showToast('请先选择一个地点');
	return;
	}

	var shareRating = document.getElementById('share-rating').value;
	var shareComments = document.getElementById('share-comments').value;
	var shareImage = document.getElementById('share-image').files[0];

	if (!shareComments.trim()) {
	showToast('请输入您的评价');
	return;
	}

	// 创建新的分享帖子
	var newPost = {
	id: 'post_' + Date.now(),
	name: currentPOI.name,
	address: currentPOI.address \|\| currentPOI.location.toString(),
	location: [currentPOI.location.lng, currentPOI.location.lat],
	rating: parseInt(shareRating),
	comments: shareComments,
	city: currentCity.name,
	time: new Date().toISOString(),
	image: null
	};

	// 如果有图片，转换为base64
	if (shareImage) {
	var reader = new FileReader();
	reader.onload = function(e) {
	newPost.image = e.target.result;

	// 添加到分享列表
	sharedPosts.push(newPost);
	localStorage.setItem('foodExplorerSharedPosts', JSON.stringify(sharedPosts));

	// 重新加载社区内容
	loadCommunityContent();

	// 切换到社区标签
	switchTab('community');

	// 关闭模态框
	closeModal('share-modal');

	// 清空表单
	document.getElementById('share-form').reset();

	showToast('分享成功！');
	};
	reader.readAsDataURL(shareImage);
	} else {
	// 添加到分享列表
	sharedPosts.push(newPost);
	localStorage.setItem('foodExplorerSharedPosts', JSON.stringify(sharedPosts));

	// 重新加载社区内容
	loadCommunityContent();

	// 切换到社区标签
	switchTab('community');

	// 关闭模态框
	closeModal('share-modal');

	// 清空表单
	document.getElementById('share-form').reset();

	showToast('分享成功！');
	}
	}

	// 更新分享预览
	function updateSharePreview() {
	if (!currentPOI) return;

	var previewContainer = document.getElementById('share-preview');
	previewContainer.innerHTML = `
	<div class="share-preview-img">
	<i class="fas fa-utensils"></i>
	</div>
	<div class="share-preview-info">
	<h3>${currentPOI.name}</h3>
	<p>${currentPOI.address \|\| currentPOI.location.toString()}</p>
	</div>
	`;
	}

	// 显示模态框
	function openModal(id) {
	document.getElementById(id).classList.add('active');
	document.body.style.overflow = 'hidden';
	}

	// 关闭模态框
	function closeModal(id) {
	document.getElementById(id).classList.remove('active');
	document.body.style.overflow = '';
	}

	// 切换标签
	function switchTab(tabId) {
	document.querySelectorAll('.tab').forEach(function(tab) {
	tab.classList.remove('active');
	});
	document.querySelectorAll('.tab-content').forEach(function(content) {
	content.classList.remove('active');
	});

	document.querySelector(`.tab[data-tab="${tabId}"]`).classList.add('active');
	document.getElementById(`${tabId}-content`).classList.add('active');
	}

	// 显示提示消息
	function showToast(message) {
	var toast = document.getElementById('toast');
	toast.textContent = message;
	toast.classList.add('show');

	setTimeout(function() {
	toast.classList.remove('show');
	}, 2000);
	}

	// 搜索按钮点击事件
	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() {
	openModal('city-modal');
	});

	// 城市项点击事件
	document.querySelectorAll('.city-item').forEach(function(cityItem) {
	cityItem.addEventListener('click', function() {
	var cityName = this.getAttribute('data-city');
	var cityAdcode = this.getAttribute('data-adcode');

	currentCity = {
	name: cityName,
	adcode: cityAdcode
	};

	updateCityText();

	// 使用地理编码服务获取城市中心点
	var geocoder = new AMap.Geocoder();
	geocoder.getLocation(cityName, function(status, result) {
	if (status === 'complete' && result.info === 'OK') {
	// 获取城市中心点
	var location = result.geocodes[0].location;

	// 设置地图中心点
	map.setCenter(location);

	// 设置适当的缩放级别
	map.setZoom(11);

	// 清除原有标记点
	clearMarkers();

	// 执行新的搜索
	searchPOI();

	// 更新社区内容
	loadCommunityContent();
	} else {
	// 如果地理编码失败，仍然执行搜索
	searchPOI();
	loadCommunityContent();
	}
	});

	closeModal('city-modal');
	});
	});

	// 收藏按钮点击事件
	document.getElementById('favorites-btn').addEventListener('click', function() {
	showFavorites();
	openModal('favorites-modal');
	});

	// 添加分享按钮点击事件
	document.getElementById('add-share-btn').addEventListener('click', function() {
	updateSharePreview();
	openModal('share-modal');
	});

	// 分享表单提交事件
	document.getElementById('share-form').addEventListener('submit', function(e) {
	e.preventDefault();
	shareFood();
	});

	// 模态框关闭按钮点击事件
	document.querySelectorAll('.modal-close').forEach(function(closeBtn) {
	closeBtn.addEventListener('click', function() {
	var modal = this.closest('.city-modal, .share-modal, .favorites-modal');
	closeModal(modal.id);
	});
	});

	// 标签切换事件
	document.querySelectorAll('.tab').forEach(function(tab) {
	tab.addEventListener('click', function() {
	var tabId = this.getAttribute('data-tab');
	switchTab(tabId);
	});
	});

	// 点击模态框背景关闭模态框
	document.querySelectorAll('.city-modal, .share-modal, .favorites-modal').forEach(function(modal) {
	modal.addEventListener('click', function(e) {
	if (e.target === this) {
	closeModal(this.id);
	}
	});
	});

	// 添加滚动加载事件
	document.getElementById('panel').addEventListener('scroll', function() {
	var panel = this;
	// 当滚动到底部附近时加载更多
	if (panel.scrollHeight - panel.scrollTop - panel.clientHeight < 100) {
	searchMorePOI();
	}
	});

	// 页面加载完成后执行
	window.onload = function() {
	initMap();
	};

	// 信息窗体中收藏按钮点击事件（全局函数，可从信息窗体HTML中调用）
	window.toggleFavorite = function(event) {
	toggleFavorite(event);
	};

	// 信息窗体中导航按钮点击事件
	window.navigateTo = function() {
	navigateTo();
	};

	// 信息窗体中分享按钮点击事件
	window.openShareModal = function() {
	updateSharePreview();
	openModal('share-modal');
	};
	</script>


	</body>
	</html>