Wuhan-Art-Map

# Wuhan Art Themed POI Map ## Core Implementation: MCP + AMap in 5 Key Steps ### 1 Keyword Search → POI ```js // MCP🔍：keywords => POI list AMap.plugin('AMap.PlaceSearch', () => { const search = new AMap.PlaceSearch({ city: 'Wuhan', type: 'Culture, Art, Art Museum', pageSize: 20 }) search.search('Art Museum Gallery', (status, res) => { ... }) }) ``` > MCP returns structured fields: `location` / `address` / `photos` / `biz_ext.open_time`, solving "coordinates + images + business hours" in one go. --- ### 2 POI Cleaning and Regional Tagging - **District Mapping**: Use regex to check if the address contains "Hankou/Jiang'an" → `hankou` - **Type Merging**: If name contains "Gallery" → `gallery`, etc. - **Deduplication Logic**: For POIs with the same name, directly update the image without inserting duplicates. 📍 Code Location: `main.js > processPOIData()` --- ### 3 Map Rendering and Info Window ```js const marker = new AMap.Marker({ position: gallery.position, icon: new AMap.Icon({ image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png', size : new AMap.Size(32,32) }), extData: gallery }) marker.on('click', () => showInfoWindow(gallery)) ``` > The `InfoWindow` displays a large image, brief introduction, opening hours, address, and navigation button. --- ### 4 Interaction: Filtering / Searching / Navigation - **Filtering**: Filter using the three conditions array `district + type + keyword` → Re-render Marker & List - **Navigation**: Call `AMap.Driving.search(start, end)` to generate driving routes - **Location**: Use `AMap.Geolocation.getCurrentPosition()` to get the user's current location --- ### 5 Data Visualization: SVG + Chart - Count the number of POIs in each district → Display ratio with bar progress - Use `#district-map-svg` to hand-draw ellipses + red dot bubble chart - Size of the ratio = percentage of area, visually displaying the distribution of art resources 📍 Implementation Functions: `renderDistrictBars()` + `renderDistrictMap()` --- ## Pitfalls & Optimizations | Issue | Solution | | ---- | -------- | | Initial loading lag with a large number of Markers | Render core POIs first, then lazy load the long tail; call `map.resize()` after `setFitView()` | | Some POIs returned by MCP have no images | If `photos` is empty → Use placeholder image `https://via.placeholder.com/...` | | Inaccurate address resolution | Correct using the `biz_ext.city` field | | Difficulty in mobile adaptation | Use `padding-bottom: 75%` to maintain a 16:9 aspect ratio for adaptive containers | ---