166 lines
6.7 KiB
HTML
166 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>民国上海美食地图</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<style>
|
|
html, body, #map { height: 100%; margin: 0; padding: 0; }
|
|
.amap-info-content { font-size: 14px; }
|
|
.legend {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
background: rgba(255,255,255,0.9);
|
|
border-radius: 6px;
|
|
padding: 10px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
z-index: 1000;
|
|
}
|
|
.legend-item { display: flex; align-items: center; margin-bottom: 6px; }
|
|
.legend-icon { width: 20px; height: 20px; margin-right: 6px; }
|
|
.marker-label {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
background: rgba(139,69,19,0.85);
|
|
border-radius: 4px;
|
|
padding: 2px 6px;
|
|
white-space: nowrap;
|
|
transition: background 0.2s;
|
|
border: none;
|
|
}
|
|
.marker-label-hover {
|
|
background: rgba(139,69,19,0.95);
|
|
color: #ffd700;
|
|
}
|
|
.amap-marker-label {
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
background: none !important;
|
|
padding: 0 !important;
|
|
}
|
|
</style>
|
|
<script src="https://webapi.amap.com/maps?v=2.0&key=278641d30cc5bc2acfc080fe5d9ad884"></script>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<div class="legend" id="legend"></div>
|
|
|
|
<script>
|
|
// 民国上海餐馆数据
|
|
const restaurantData = [
|
|
{"type":"北京菜","name":"同兴楼","address":"福州路435号","location":"121.481986,31.233629"},
|
|
{"type":"天津菜","name":"六合局","address":"广西路福祥里隔壁","location":"121.477614,31.233638"},
|
|
{"type":"四川菜","name":"成都川菜馆","address":"宁海西路22号","location":"121.472966,31.224718"},
|
|
{"type":"广东菜","name":"一家春","address":"福州路266号","location":"121.485223,31.234628"},
|
|
{"type":"徽州菜","name":"大中国菜馆","address":"大连路469号","location":"121.513564,31.258713"},
|
|
{"type":"宁波菜","name":"又二屯","address":"南京西路304号","location":"121.47031,31.232358"},
|
|
{"type":"上海菜","name":"大名春楼菜馆","address":"浙江中路394号","location":"121.478014,31.236127"},
|
|
{"type":"素菜","name":"功德林斋食处","address":"黄河路41号","location":"121.470911,31.233874"},
|
|
{"type":"西菜","name":"华懋饭店","address":"南京路外滩沙逊房子内","location":"121.483723,31.238521"},
|
|
{"type":"中国西菜","name":"水上饭店","address":"中山东一路北京东路口","location":"121.490243,31.240637"},
|
|
];
|
|
|
|
// 菜系到图标的映射
|
|
const cuisineIcons = {
|
|
'北京菜': 'https://ai-studio-static-online.cdn.bcebos.com/e226f0a3dd604ecf89b47ec3311d01ce8072b4084aaa4ab5872ede1726def944',
|
|
'天津菜': 'https://ai-studio-static-online.cdn.bcebos.com/e21c4f50170b42f78d18294cb5825c4123f0898c91b14ea4af22f78e42e732f0',
|
|
'四川菜': 'https://ai-studio-static-online.cdn.bcebos.com/20082100695540b59ef948ea1e1230ff6750e05d5dfd471e877742f242fd8419',
|
|
'广东菜': 'https://ai-studio-static-online.cdn.bcebos.com/eace9ecb10014aae8403105c539f651c485f80f371b64dfdba5fbe9100ddcfac',
|
|
'徽州菜': 'https://ai-studio-static-online.cdn.bcebos.com/35c104af833f45fbbe11b53d1126443b5137a3c5c4594605a24510c4138789d3',
|
|
'宁波菜': 'https://ai-studio-static-online.cdn.bcebos.com/1f4e4642282f4c79a3ab7a7a3562048291d1a448e52943f982e05551a441621c',
|
|
'上海菜': 'https://ai-studio-static-online.cdn.bcebos.com/e8f7ecd86f284fb5b82e88910d0dbe631b74dc50b9fb46b0b7029481eac74d5c',
|
|
'西菜': 'https://ai-studio-static-online.cdn.bcebos.com/4236f8bd291c4f2bb66348b3e310efdf53ba239db5054bf6bb1eea520354b358',
|
|
'素菜': 'https://ai-studio-static-online.cdn.bcebos.com/ebb4e758d42c4a45947db093e8232519b2fe101fbfdc490ab6a57f252e6b7e65',
|
|
'中国西菜': 'https://ai-studio-static-online.cdn.bcebos.com/93f35084f140491690936f0ae6b087818c4658b056ee42abbe083a7b5d6c803c'
|
|
};
|
|
|
|
// 图例配置
|
|
const legendTypes = [
|
|
{type: '北京菜', label: '北京菜'},
|
|
{type: '天津菜', label: '天津菜'},
|
|
{type: '四川菜', label: '四川菜'},
|
|
{type: '广东菜', label: '广东菜'},
|
|
{type: '徽州菜', label: '徽州菜'},
|
|
{type: '宁波菜', label: '宁波菜'},
|
|
{type: '上海菜', label: '上海菜'},
|
|
{type: '西菜', label: '西菜'},
|
|
{type: '素菜', label: '素菜'},
|
|
{type: '中国西菜', label: '中国西菜'}
|
|
];
|
|
|
|
// 初始化地图 - 上海中心坐标
|
|
const map = new AMap.Map('map', {
|
|
center: [121.473701, 31.230416],
|
|
zoom: 13
|
|
});
|
|
|
|
// 渲染图例
|
|
const legend = document.getElementById('legend');
|
|
legend.innerHTML = legendTypes.map(t =>
|
|
`<div class="legend-item">
|
|
<img class="legend-icon" src="${cuisineIcons[t.type]}" alt="${t.label}" />
|
|
${t.label}
|
|
</div>`
|
|
).join('');
|
|
|
|
// 信息窗口
|
|
let infoWindow = null;
|
|
|
|
// 渲染所有餐馆标记
|
|
function renderRestaurants() {
|
|
restaurantData.forEach(restaurant => {
|
|
if (!restaurant.location) return;
|
|
|
|
const [lng, lat] = restaurant.location.split(',').map(Number);
|
|
const iconUrl = cuisineIcons[restaurant.type] || cuisineIcons['上海菜'];
|
|
|
|
const marker = new AMap.Marker({
|
|
position: [lng, lat],
|
|
icon: new AMap.Icon({
|
|
image: iconUrl,
|
|
size: new AMap.Size(32, 32),
|
|
imageSize: new AMap.Size(32, 32)
|
|
}),
|
|
title: restaurant.name,
|
|
offset: new AMap.Pixel(-16, -32)
|
|
});
|
|
|
|
// 点击显示详情
|
|
marker.on('click', () => showRestaurantInfo(restaurant));
|
|
marker.setMap(map);
|
|
});
|
|
}
|
|
|
|
// 显示餐馆信息
|
|
function showRestaurantInfo(restaurant) {
|
|
if (infoWindow) {
|
|
infoWindow.close();
|
|
}
|
|
|
|
const content = `
|
|
<div style="min-width:200px;max-width:280px;font-family:'Microsoft YaHei',sans-serif;">
|
|
<div style="font-size:16px;font-weight:bold;margin-bottom:8px;color:#8B4513;">${restaurant.name}</div>
|
|
<div style="margin-bottom:4px;"><strong>地址：</strong>${restaurant.address}</div>
|
|
<div style="margin-bottom:4px;"><strong>菜系：</strong>${restaurant.type}</div>
|
|
</div>
|
|
`;
|
|
|
|
const [lng, lat] = restaurant.location.split(',').map(Number);
|
|
infoWindow = new AMap.InfoWindow({
|
|
content,
|
|
offset: new AMap.Pixel(0, -30)
|
|
});
|
|
infoWindow.open(map, [lng, lat]);
|
|
}
|
|
|
|
// 点击地图空白处关闭信息窗口
|
|
map.on('click', function() {
|
|
if (infoWindow) infoWindow.close();
|
|
});
|
|
|
|
// 初始化渲染
|
|
renderRestaurants();
|
|
</script>
|
|
</body>
|
|
</html> |