Build an AI-Powered Hangzhou Food Map in Hours – From Idea to Live Demo
This article documents a rapid AI‑assisted workflow that turns a spontaneous idea into a functional, interactive Hangzhou food map by integrating Cursor with Gaode MCP services, writing HTML/JS, debugging, adding assets, and deploying the static site via GitHub Pages.
AI + Map Service Practice Overview
The author records a quick end‑to‑end experiment that combines the Cursor AI coding assistant with Gaode MCP map services to create an interactive, filterable, and recommendation‑enabled food map of Hangzhou within a few hours.
Install Gaode MCP Server
{
"mcpServers": {
"amap-amap-sse": {
"url": "https://mcp.amap.com/sse?key=YOUR_GAODE_KEY"
}
}
}After configuring the key, the MCP server status can be verified; a normal response is shown in the screenshot.
Construct Prompt for AI Coding
1. Create only necessary files in the current folder.
2. Build a previewable food map using HTML.
3. Mark each restaurant with precise coordinates and distinct icons.
4. Use the real Hangzhou map.
5. Clicking an icon shows details (advantages, phone, rating, etc.).
6. Use any tools, e.g., Gaode MCP, to achieve the goal.
7. Provide data in MCP‑compatible JSON; leave coordinates empty if not found.First Round – Fuzzy Search for Candidate Restaurants
Cursor calls the maps_text_search method of the MCP server with keywords and city limit, returning a list of POIs. The ID of a matching restaurant (e.g., "如*餐厅") is extracted for the next step.
Second Round – Retrieve Restaurant Details by ID
{
"id": "B0JA5UF6R*",
"name": "如*餐厅",
"location": "120.122175,30.253356",
"address": "玉泉路1*号",
"type": "餐饮服务;中餐厅;中餐厅",
"photo": "http://store.is.autonavi.com/showpic/b08795ab6adeba25a0115d74130862a*",
"opentime2": "周一至周日 11:30-14:00,17:30-21:00",
"rating": "4.7"
}The detailed information is then formatted into a JSON data source for the map.
Build the Web Page and Render Markers
// Sample JavaScript to initialize the map, load data, and render markers
const map = new AMap.Map('map', {center: [120.15507,30.274085], zoom: 12});
function renderMarkers(){
data.forEach(item=>{
if(!item.location) return;
const [lng, lat] = item.location.split(',').map(Number);
const iconUrl = getCategoryIcon(item.category);
const marker = new AMap.Marker({
position: [lng, lat],
icon: new AMap.Icon({image: iconUrl, size: new AMap.Size(32,32)}),
title: item.name,
label:{content:`<span class='marker-label'>${item.name}</span>`}
});
marker.on('click',()=>showInfo(item));
marker.setMap(map);
});
}
renderMarkers();The page includes a legend, filter panel for recommendation stars and categories, and an info window that displays restaurant details when a marker is clicked.
Debugging and Asset Collection
After the main functionality works, the author spent most of the time refining UI details (font sizes, background styles, close‑button logic) and searching for suitable icon assets. The Alibaba Iconfont library was used to obtain a comprehensive set of vector icons.
Deployment
The static site can be deployed via GitHub Pages, Gitee, or an Alibaba Cloud server. The guide outlines creating a repository named username.github.io, pushing the index.html and related files, configuring the Pages source branch, and optionally using GitHub Actions for automatic deployment.
Appendix – Full Source Code
<!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>/* CSS omitted for brevity */</style>
<script src="https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY"></script>
</head>
<body>
<div id="map"></div>
<div class="legend" id="legend"></div>
<div class="filter-panel">...filter UI...</div>
<script>/* JavaScript from the previous sections */</script>
</body>
</html>Model Distillation Example (Optional)
The article also briefly mentions a separate experiment: using model distillation to fine‑tune a 0.6B Qwen3 model with outputs from a 235B model, boosting task accuracy from 14 % to over 90 % in ten minutes.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Alibaba Cloud Developer
Alibaba's official tech channel, featuring all of its technology innovations.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.