--- title: "地图 + 筛选侧栏" summary: "左侧多段筛选、右侧 Leaflet 地图：结果列表和标记实时同步，点聚合只数符合条件的点，点列表飞到地图并弹详情。" category: "layout (整页与区块)" origin: "original" stack: ["html","css","javascript","leaflet"] tags: ["地图","筛选面板","点聚合","列表联动","工具页"] demo: "https://zhuoqidev.com/design/demos/map-filter-finder/" url: "https://zhuoqidev.com/design/map-filter-finder/" license: "MIT" added: "2026-10-14" translation: "https://zhuoqidev.com/en/design/map-filter-finder/index.md" --- # 地图 + 筛选侧栏 > 左侧多段筛选、右侧 Leaflet 地图：结果列表和标记实时同步，点聚合只数符合条件的点，点列表飞到地图并弹详情。演示数据是虚构的 44 家咖啡馆，店名、位置、评分都是编的；底图来自 OpenStreetMap。 ## 看点 - **一个 state、一次 render**：类型、评分、营业时间、设施、搜索都只改 `state`，然后 `render()` 用同一个 `pass()` 同时算出列表和地图标记，两边永远对得上。 - **不符合的变灰或隐藏**：可选「在地图上变灰」（保留空间感，知道哪里还有店）或「从地图上隐藏」。 - **点聚合只数符合的**：`leaflet.markercluster` 的 `iconCreateFunction` 里只数通过筛选的子标记，气泡上的数字和列表条数一致；全都不符合的聚合点变灰。 - **列表 ↔ 地图联动**：悬停列表行，对应标记（或它所在的聚合点）放大描边；点列表行用 `zoomToShowLayer` 展开聚合、再弹出详情；点地图标记，列表滚到那一行并高亮。 - **点地图设起点**：点任意位置放一个「起」标记，排序自动切到「离起点最近」，列表和弹窗都显示距离（`map.distance`）。 - **深色地图不用第二套瓦片**：瓦片层加 `filter: invert(1) hue-rotate(180deg)` 再降饱和；浅色模式也压一点灰，让彩色标记更跳。 - **窄屏变抽屉**：760px 以下筛选面板变成左侧抽屉，地图上浮一个「筛选 · 29」按钮，数字跟着结果变。 ## 怎么用 1. 引入 Leaflet 和 markercluster 的 CSS / JS（`leaflet@1.9.4`、`leaflet.markercluster@1.5.3`），拷页面结构和样式。 2. 把 `data.js` 换成你的数据，每条至少有 `id`、`name`、`lat`、`lng`；在 `KINDS`、`FEATS` 里改分类和设施名，`pass()` 里改筛选规则。 3. 改 `setView` 的中心和缩放；`popupHtml()` 决定详情里显示什么。 4. 数据从接口来时，拿到后赋给 `cafes` 再调一次 `render()` 即可。 ## 坑 - 示例直连 `tile.openstreetmap.org`，只适合低流量演示。OSM 瓦片使用政策要求标注「© OpenStreetMap contributors」、禁止批量下载和离线缓存，流量大了要换商业瓦片服务或自建。 - 国内一些地图服务用 GCJ-02 坐标，OSM 用 WGS-84，两套直接混用会偏几百米。数据和底图要用同一套坐标系。 - `markerClusterGroup` 每次 `clearLayers()` 再 `addLayers()` 比逐个增删快很多；几十个点无所谓，上千个点一定要批量加。 - 标记在聚合里时 `marker.getElement()` 是 `null`，高亮要先 `getVisibleParent()` 找到实际显示的那个聚合点。 - 抽屉、侧栏里的地图在容器尺寸变化后要调 `map.invalidateSize()`；本例地图区域尺寸固定，所以没用到。 ## 参考实现（完整源码）在线演示：https://zhuoqidev.com/design/demos/map-filter-finder/。共 2 个文件，第一个是演示页本身。 ### index.html ```html 地图 + 筛选侧栏

湖边咖啡馆地图

示例数据

类型

评分下限营业到

要有

排序不符合的

点地图任意位置设为起点，列表会显示距离。

``` ### data.js ```js // Fictional sample data: names, positions, ratings and hours are all made up for the demo. window.CAFES = [ { id: 1, name: "风铃烘焙所", kind: "bake", lat: 30.27382, lng: 120.13891, rating: 4.1, close: 18, seats: 16, feats: ["quiet"], note: "上午十点出炉，可颂常常卖完", }, { id: 2, name: "白鹭咖啡研究所", kind: "hand", lat: 30.26499, lng: 120.16417, rating: 3.6, close: 22, seats: 8, feats: ["wifi"], note: "豆单每周换，吧台可以聊产地", }, { id: 3, name: "豆仓咖啡 · 门牌店", kind: "chain", lat: 30.27385, lng: 120.17126, rating: 4.0, close: 22, seats: 20, feats: ["socket", "wifi"], note: "出杯快，适合赶时间", }, { id: 4, name: "慢岛咖啡", kind: "hand", lat: 30.26848, lng: 120.17218, rating: 3.8, close: 21, seats: 8, feats: ["socket"], note: "只做手冲和意式，菜单很短", }, { id: 5, name: "柚子茶咖", kind: "tea", lat: 30.26243, lng: 120.17969, rating: 3.7, close: 22, seats: 40, feats: ["socket", "outdoor", "quiet"], note: "乌龙冷萃和手冲都有", }, { id: 6, name: "半坡面包与咖啡", kind: "bake", lat: 30.2458, lng: 120.17847, rating: 4.0, close: 20, seats: 12, feats: ["socket", "wifi", "outdoor"], note: "上午十点出炉，可颂常常卖完", }, { id: 7, name: "落叶烘焙所", kind: "bake", lat: 30.27104, lng: 120.19576, rating: 4.6, close: 19, seats: 40, feats: ["socket", "outdoor", "quiet"], note: "上午十点出炉，可颂常常卖完", }, { id: 8, name: "纸飞机面包与咖啡", kind: "bake", lat: 30.27515, lng: 120.13921, rating: 4.0, close: 18, seats: 60, feats: ["socket"], note: "咖啡配司康，二楼有长桌", }, { id: 9, name: "羽毛手冲", kind: "hand", lat: 30.26832, lng: 120.17072, rating: 4.4, close: 21, seats: 12, feats: ["socket", "outdoor", "quiet"], note: "老板自己烘豆，周末有杯测", }, { id: 10, name: "山茶甜点咖啡", kind: "bake", lat: 30.24702, lng: 120.17495, rating: 4.2, close: 18, seats: 8, feats: ["socket", "pet", "outdoor"], note: "甜点比咖啡出名，适合约朋友", }, { id: 11, name: "黑胶手冲", kind: "hand", lat: 30.24662, lng: 120.17772, rating: 3.7, close: 20, seats: 40, feats: ["socket", "wifi"], note: "豆单每周换，吧台可以聊产地", }, { id: 12, name: "豆仓咖啡 · 青柠店", kind: "chain", lat: 30.25387, lng: 120.17325, rating: 4.4, close: 21, seats: 30, feats: ["socket", "wifi", "outdoor"], note: "座位多，网络稳定", }, { id: 13, name: "秋千茶咖", kind: "tea", lat: 30.25524, lng: 120.19578, rating: 4.5, close: 22, seats: 40, feats: ["pet", "quiet"], note: "中式小院，有几张户外桌", }, { id: 14, name: "北窗烘焙所", kind: "bake", lat: 30.28908, lng: 120.19549, rating: 3.9, close: 19, seats: 40, feats: ["socket", "wifi", "outdoor"], note: "上午十点出炉，可颂常常卖完", }, { id: 15, name: "豆仓咖啡 · 砂糖店", kind: "chain", lat: 30.2807, lng: 120.13987, rating: 3.8, close: 23, seats: 60, feats: ["socket", "wifi", "pet", "quiet"], note: "出杯快，适合赶时间", }, { id: 16, name: "豆仓咖啡 · 海盐店", kind: "chain", lat: 30.26775, lng: 120.18844, rating: 3.9, close: 22, seats: 8, feats: ["socket", "wifi", "pet", "quiet"], note: "座位多，网络稳定", }, { id: 17, name: "豆仓咖啡 · 巷尾店", kind: "chain", lat: 30.25198, lng: 120.16756, rating: 4.5, close: 18, seats: 40, feats: ["socket", "wifi", "outdoor"], note: "座位多，网络稳定", }, { id: 18, name: "豆仓咖啡 · 松果店", kind: "chain", lat: 30.24761, lng: 120.19179, rating: 4.0, close: 23, seats: 12, feats: ["socket", "wifi"], note: "出杯快，适合赶时间", }, { id: 19, name: "长椅茶与咖啡", kind: "tea", lat: 30.25754, lng: 120.17653, rating: 4.7, close: 23, seats: 20, feats: ["wifi"], note: "茶底拿铁是招牌", }, { id: 20, name: "铁皮咖啡", kind: "hand", lat: 30.25072, lng: 120.1972, rating: 3.7, close: 18, seats: 24, feats: ["socket", "wifi", "outdoor", "quiet"], note: "豆单每周换，吧台可以聊产地", }, { id: 21, name: "橘子茶与咖啡", kind: "tea", lat: 30.24385, lng: 120.19222, rating: 4.1, close: 23, seats: 16, feats: ["wifi"], note: "中式小院，有几张户外桌", }, { id: 22, name: "苔藓烘焙所", kind: "bake", lat: 30.26846, lng: 120.16972, rating: 4.4, close: 20, seats: 12, feats: ["wifi", "outdoor", "quiet"], note: "上午十点出炉，可颂常常卖完", }, { id: 23, name: "角落咖啡研究所", kind: "hand", lat: 30.24842, lng: 120.18119, rating: 3.7, close: 23, seats: 20, feats: ["socket", "pet"], note: "老板自己烘豆，周末有杯测", }, { id: 24, name: "拾光面包与咖啡", kind: "bake", lat: 30.28615, lng: 120.19298, rating: 4.1, close: 20, seats: 24, feats: ["socket"], note: "甜点比咖啡出名，适合约朋友", }, { id: 25, name: "云朵茶咖", kind: "tea", lat: 30.26824, lng: 120.18858, rating: 4.8, close: 22, seats: 30, feats: ["wifi", "outdoor", "quiet"], note: "中式小院，有几张户外桌", }, { id: 26, name: "豆仓咖啡 · 木马店", kind: "chain", lat: 30.26099, lng: 120.17278, rating: 3.9, close: 22, seats: 12, feats: ["socket", "wifi", "outdoor"], note: "座位多，网络稳定", }, { id: 27, name: "小满茶咖", kind: "tea", lat: 30.28082, lng: 120.14584, rating: 4.8, close: 21, seats: 60, feats: ["socket", "wifi"], note: "乌龙冷萃和手冲都有", }, { id: 28, name: "晴天茶咖", kind: "tea", lat: 30.26466, lng: 120.18757, rating: 3.9, close: 21, seats: 60, feats: ["socket", "wifi", "pet"], note: "乌龙冷萃和手冲都有", }, { id: 29, name: "书页烘焙所", kind: "bake", lat: 30.28353, lng: 120.15517, rating: 4.4, close: 19, seats: 12, feats: ["wifi"], note: "甜点比咖啡出名，适合约朋友", }, { id: 30, name: "豆仓咖啡 · 蜂巢店", kind: "chain", lat: 30.27268, lng: 120.18405, rating: 4.0, close: 24, seats: 20, feats: ["socket", "wifi", "pet", "quiet"], note: "营业时间长，深夜也开", }, { id: 31, name: "豆仓咖啡 · 栗子店", kind: "chain", lat: 30.25138, lng: 120.19132, rating: 4.1, close: 19, seats: 40, feats: ["socket", "wifi"], note: "座位多，网络稳定", }, { id: 32, name: "豆仓咖啡 · 石板店", kind: "chain", lat: 30.24049, lng: 120.1698, rating: 4.1, close: 19, seats: 8, feats: ["socket", "wifi", "pet"], note: "出杯快，适合赶时间", }, { id: 33, name: "旧钟茶咖", kind: "tea", lat: 30.26084, lng: 120.1642, rating: 3.9, close: 23, seats: 8, feats: ["socket", "wifi"], note: "中式小院，有几张户外桌", }, { id: 34, name: "杏仁茶咖", kind: "tea", lat: 30.25486, lng: 120.19778, rating: 4.1, close: 23, seats: 24, feats: ["wifi", "outdoor", "quiet"], note: "中式小院，有几张户外桌", }, { id: 35, name: "白瓷烘焙所", kind: "bake", lat: 30.26756, lng: 120.15717, rating: 4.7, close: 18, seats: 60, feats: ["outdoor", "quiet"], note: "咖啡配司康，二楼有长桌", }, { id: 36, name: "月台手冲", kind: "hand", lat: 30.2653, lng: 120.19768, rating: 4.0, close: 24, seats: 60, feats: ["socket", "wifi", "outdoor"], note: "豆单每周换，吧台可以聊产地", }, { id: 37, name: "麦穗茶咖", kind: "tea", lat: 30.24036, lng: 120.17923, rating: 4.4, close: 18, seats: 12, feats: ["socket"], note: "茶底拿铁是招牌", }, { id: 38, name: "雾里茶咖", kind: "tea", lat: 30.26368, lng: 120.17995, rating: 3.7, close: 21, seats: 30, feats: ["socket", "wifi", "outdoor", "quiet"], note: "中式小院，有几张户外桌", }, { id: 39, name: "邮筒手冲", kind: "hand", lat: 30.27016, lng: 120.15264, rating: 4.9, close: 22, seats: 20, feats: ["wifi", "outdoor"], note: "老板自己烘豆，周末有杯测", }, { id: 40, name: "萤火咖啡", kind: "hand", lat: 30.28831, lng: 120.1805, rating: 4.1, close: 22, seats: 30, feats: ["pet", "outdoor"], note: "老板自己烘豆，周末有杯测", }, { id: 41, name: "豆仓咖啡 · 回声店", kind: "chain", lat: 30.26462, lng: 120.18966, rating: 4.2, close: 21, seats: 8, feats: ["socket", "wifi"], note: "座位多，网络稳定", }, { id: 42, name: "灯塔咖啡研究所", kind: "hand", lat: 30.28908, lng: 120.19499, rating: 4.9, close: 19, seats: 8, feats: ["wifi", "outdoor", "quiet"], note: "只做手冲和意式，菜单很短", }, { id: 43, name: "豆仓咖啡 · 鲸鱼店", kind: "chain", lat: 30.25009, lng: 120.18972, rating: 3.9, close: 22, seats: 60, feats: ["socket", "wifi"], note: "出杯快，适合赶时间", }, { id: 44, name: "码头手冲", kind: "hand", lat: 30.28571, lng: 120.18407, rating: 3.7, close: 20, seats: 12, feats: ["wifi", "outdoor"], note: "老板自己烘豆，周末有杯测", }, ]; ```