|
|
<!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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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); |
|
|
} |
|
|
|
|
|
|
|
|
@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 { |
|
|
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 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(); |
|
|
|
|
|
|
|
|
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 { |
|
|
|
|
|
updateCityText(); |
|
|
initPlaceSearch(); |
|
|
loadCommunityContent(); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function initPlaceSearch() { |
|
|
placeSearch = new AMap.PlaceSearch({ |
|
|
pageSize: 10, |
|
|
pageIndex: 1, |
|
|
city: currentCity.adcode, |
|
|
citylimit: true, |
|
|
autoFitView: true |
|
|
}); |
|
|
|
|
|
|
|
|
placeSearch.on('complete', function(results) { |
|
|
document.querySelector('.loading').style.display = 'none'; |
|
|
if (results.info === 'OK') { |
|
|
customizeResultList(results.poiList.pois); |
|
|
addMarkersToMap(results.poiList.pois); |
|
|
} else { |
|
|
document.getElementById('results-content').innerHTML = '<div class="no-results">没有找到相关结果</div>'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
searchPOI(); |
|
|
} |
|
|
|
|
|
|
|
|
function searchPOI() { |
|
|
if (!placeSearch) { |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
clearMarkers(); |
|
|
|
|
|
document.querySelector('.loading').style.display = 'block'; |
|
|
placeSearch.setCity(currentCity.adcode); |
|
|
placeSearch.setType('餐饮'); |
|
|
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 clearMarkers() { |
|
|
if (markers.length > 0) { |
|
|
map.remove(markers); |
|
|
markers = []; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function addMarkersToMap(pois) { |
|
|
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 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(); |
|
|
} |
|
|
|
|
|
|
|
|
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)); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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)); |
|
|
|
|
|
|
|
|
item.remove(); |
|
|
|
|
|
|
|
|
updateResultListFavoriteStatus(); |
|
|
|
|
|
|
|
|
if (favorites.length === 0) { |
|
|
favoritesList.style.display = 'none'; |
|
|
emptyFavorites.style.display = 'block'; |
|
|
} |
|
|
|
|
|
showToast('已从收藏中移除'); |
|
|
}); |
|
|
|
|
|
favoritesList.appendChild(item); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function navigateTo() { |
|
|
if (!currentPOI) return; |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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 |
|
|
}; |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
window.onload = function() { |
|
|
initMap(); |
|
|
}; |
|
|
|
|
|
|
|
|
window.toggleFavorite = function(event) { |
|
|
toggleFavorite(event); |
|
|
}; |
|
|
|
|
|
|
|
|
window.navigateTo = function() { |
|
|
navigateTo(); |
|
|
}; |
|
|
|
|
|
|
|
|
window.openShareModal = function() { |
|
|
updateSharePreview(); |
|
|
openModal('share-modal'); |
|
|
}; |
|
|
</script> |
|
|
</body> |
|
|
</html> |
