Python 实现高德地图找房（三）：地图可视化与高德 JS API

江华森2026-07-10 15:17

Python 实现高德地图找房（三）：地图可视化与高德 JS API

你将学到：folium 交互式地图、热力图、区域标记、高德地图 JavaScript API、HTML 页面开发、地图交互功能

实验环境：node-04（120.46.44.194），华为云 FlexusX ECS

一、本篇概述

1.1 实验流程

本篇在 node-04 上完成地图可视化，产出两个可在浏览器中直接打开的 HTML 页面：

复制代码 
node-03 (上篇产出)              node-04 (本篇)
┌───────────────────┐          ┌────────────────────────┐
│ houses_geocoded.json│ ── SCP ─> │ 第一部分: folium        │
│ (含经纬度坐标)      │          │ 交互式地图 + 热力图     │
└───────────────────┘          │  → house_map_folium.html│
                                │                         │
                                │ 第二部分: 高德 JS API    │
                                │ HTML 页面 + 筛选交互    │
                                │  → house_map_amap.html   │
                                └────────────────────────┘

1.2 两种可视化方案对比

方案 技术 优点 缺点
folium Python 库 + Leaflet.js 纯 Python 生成，无需 Key 交互功能有限
高德 JS API 原生 HTML + JS 功能丰富，官方支持 需申请 JS API Key

二、folium 交互式地图

2.1 folium 简介

folium 是 Python 的地图可视化库，基于 Leaflet.js 封装，能生成交互式 HTML 地图。

复制代码 
folium 架构：

  ┌─────────────────────────────────┐
  │          Python 代码            │
  │  folium.Map() / Marker()        │
  └────────────┬────────────────────┘
               │
               ▼
  ┌─────────────────────────────────┐
  │       Leaflet.js (JS)           │
  │  地图渲染引擎                   │
  └────────────┬────────────────────┘
               │
               ▼
  ┌─────────────────────────────────┐
  │        HTML 文件                │
  │  house_map_folium.html         │
  │  (浏览器打开即可交互)           │
  └─────────────────────────────────┘

2.2 安装

bash 复制代码 
pip3 install --break-system-packages folium

# 验证
python3 -c "import folium; print(folium.__version__)"
# 0.19.5

2.3 创建基础地图

python 复制代码 
import folium
import json
import pandas as pd

# 加载地理编码数据
with open('/root/houses_geocoded.json', 'r', encoding='utf-8') as f:
    data = json.load(f)
df = pd.DataFrame(data)

# 深圳中心坐标
sz_center = [22.543, 114.058]

# 创建地图
m = folium.Map(
    location=sz_center,
    zoom_start=11,           # 初始缩放级别
    tiles='OpenStreetMap',   # 底图样式
    control_scale=True,      # 显示比例尺
)
参数 说明 常用值
location 地图中心 纬度, 经度 [22.543, 114.058]
zoom_start 初始缩放级别 1-20，11 表示城市级
tiles 底图样式 OpenStreetMap/CartoDB positron/Stamen Terrain
control_scale 显示比例尺 True/False

2.4 添加房源标记（Marker）

python 复制代码 
# 价格颜色分级函数
def price_color(price):
    if price >= 6000: return 'red'       # 红色: 高价
    elif price >= 4000: return 'orange'   # 橙色: 中高
    elif price >= 2500: return 'green'    # 绿色: 中等
    else: return 'blue'                   # 蓝色: 低价

# 为每条房源添加标记
for h in data:
    popup_html = f"""
    <div style="font-size:12px; min-width:200px;">
        <h4 style="margin:0 0 5px 0; color:#333;">{h['title']}</h4>
        <table style="width:100%; border-collapse:collapse;">
            <tr><td style="color:#FF6B6B; font-weight:bold;">
                💰 {h['price']}元/月</td></tr>
            <tr><td>📐 {h['area']}㎡ · {h['rooms']}</td></tr>
            <tr><td>🧭 朝向: {h['direction']}</td></tr>
            <tr><td>📍 {h['address']}</td></tr>
            <tr><td>🏷️ {h['tags']}</td></tr>
            <tr><td>🏢 {h['floor']} · {h['years']}年建</td></tr>
        </table>
    </div>
    """

    folium.Marker(
        location=[h['latitude'], h['longitude']],
        popup=folium.Popup(popup_html, max_width=250),
        tooltip=f"{h['title']} - {h['price']}元/月",
        icon=folium.Icon(
            color=price_color(h['price']),
            icon='home',
            prefix='fa'
        ),
    ).add_to(m)

Marker 关键参数：

参数 说明 示例
location 标记位置 纬度, 经度 [22.539, 113.946]
popup 点击弹出的内容 folium.Popup(html)
tooltip 悬停提示文字 "科技园精装两居室"
icon 图标样式 folium.Icon(color='red', icon='home')

2.5 添加价格热力图（HeatMap）

python 复制代码 
from folium.plugins import HeatMap

# 热力图数据：[纬度, 经度, 权重值]
heat_data = [[h['latitude'], h['longitude'], h['price']/100] for h in data]

HeatMap(
    heat_data,
    radius=20,     # 热力点半径（像素）
    blur=15,       # 模糊度
    max_zoom=13,   # 最大缩放级别
    gradient={     # 渐变色
        0.2: '#95E1D3',  # 浅绿
        0.4: '#4ECDC4',  # 青色
        0.6: '#45B7D1',  # 蓝色
        0.8: '#FF8C00',  # 橙色
        1.0: '#FF0000',  # 红色
    }
).add_to(m)
复制代码 
热力图效果：

  低价区(浅绿)          高价区(红色)
  ┌─────────┐          ┌─────────┐
  │  ●  ●  │          │  ●●●●  │
  │ ● ●● ● │          │ ●●●●●● │
  │  ●  ●  │          │  ●●●●  │
  └─────────┘          └─────────┘
  宝安/龙岗              南山/福田
  1000-3000元          4500-12000元

2.6 添加区域中心标记（CircleMarker）

python 复制代码 
# 各区中心坐标
district_centers = {
    '南山': (22.533, 113.930),
    '福田': (22.523, 114.055),
    '罗湖': (22.548, 114.130),
    '宝安': (22.555, 113.883),
    '龙华': (22.658, 114.037),
    '光明': (22.745, 113.936),
    '龙岗': (22.719, 114.246),
    '盐田': (22.565, 114.258),
    '坪山': (22.706, 114.350),
}

for dist, (lat, lng) in district_centers.items():
    dist_data = df[df['district'] == dist]
    avg_price = dist_data['price'].mean()
    count = len(dist_data)

    folium.CircleMarker(
        location=[lat, lng],
        radius=15,
        popup=f"{dist}区: {count}套房源, 均价{avg_price:.0f}元/月",
        tooltip=f"{dist}区",
        color='#FF6B6B' if avg_price >= 5000 else '#4ECDC4',
        fill=True,
        fill_opacity=0.3,
        weight=2,
    ).add_to(m)

2.7 保存地图

python 复制代码 
m.save('/root/house_map_folium.html')

2.8 folium 运行结果

复制代码 
root@node-04:~# python3 gaode_visualize.py
Python 高德地图找房 - 地图可视化
服务器: ecs-11e6-0004

============================================================
第一部分：folium 交互式地图
============================================================

[1] 数据加载: 25 条房源

[2] 创建基础地图
  中心: [22.543, 114.058], 缩放: 11
  底图: OpenStreetMap

[3] 添加房源标记（Marker）
  已添加 25 个标记

[4] 添加热力图（HeatMap）
  热力图已添加

[5] 添加区域中心标记（CircleMarker）
  已添加 9 个区域标记

[6] folium 地图已保存: /root/house_map_folium.html

生成的 HTML 文件 ：house_map_folium.html（65KB），浏览器打开即可交互：

  • 点击标记查看房源详情
  • 鼠标悬停显示标题和价格
  • 缩放/拖拽地图
  • 热力图直观展示价格分布

2.9 folium 方法速查表

方法/类 说明 示例
folium.Map(location, zoom) 创建地图 Map(location=[22.5,114.0], zoom=11)
folium.Marker(location, popup, icon) 添加标记 Marker([lat,lng], popup=html)
folium.Icon(color, icon) 标记图标 Icon(color='red', icon='home')
folium.Popup(html) 弹出框 Popup(html, max_width=250)
folium.CircleMarker(loc, r) 圆形标记 CircleMarker([lat,lng], radius=15)
HeatMap(data, radius, blur) 热力图 HeatMap([[lat,lng,val]], radius=20)
m.save(filepath) 保存为 HTML m.save('map.html')
m.add_child(layer) 添加图层 m.add_child(HeatMap(data))

三、高德地图 JavaScript API

3.1 JS API 简介

高德地图 JavaScript API 是高德开放平台提供的浏览器端地图 SDK，功能比 folium 更强大，支持自定义标记、信息窗体、路线规划等。

复制代码 
高德 JS API 架构：

  ┌──────────────────────────────┐
  │         HTML 页面             │
  │  ┌────────────────────────┐  │
  │  │    <div id="container"> │  │  ← 地图容器
  │  │                        │  │
  │  │    地图渲染区域          │  │
  │  │                        │  │
  │  └────────────────────────┘  │
  │                               │
  │  <script>                     │
  │    AMap.Map()  创建地图       │  ← JS API 调用
  │    AMap.Marker() 添加标记     │
  │    AMap.InfoWindow() 信息窗体 │
  │  </script>                    │
  └──────────────────────────────┘
         │
         ▼
  webapi.amap.com/maps?v=2.0  ← 高德云端服务

3.2 HTML 页面结构

完整的 HTML 页面分为三个部分：

复制代码 
HTML 页面结构：

  ┌─────────────────────────────────────┐
  │           <head> 样式定义           │
  │  CSS 样式（卡片、标签、筛选栏）     │
  ├─────────────────────────────────────┤
  │           <body> 页面布局           │
  │  ┌─────────────────────────────┐    │
  │  │  #header 标题栏              │    │
  │  │  🏠 深圳租房地图 · 高德找房  │    │
  │  ├─────────────────────────────┤    │
  │  │  .filter-bar 筛选栏         │    │
  │  │  [区域▼] [价格] [面积]      │    │
  │  ├──────────────────┬──────────┤    │
  │  │  #container       │ #sidebar │    │
  │  │  地图渲染区域      │ 房源列表  │    │
  │  │                   │ 卡片列表  │    │
  │  └──────────────────┴──────────┘    │
  ├─────────────────────────────────────┤
  │           <script> JS 逻辑          │
  │  1. 加载房源数据                   │
  │  2. 初始化地图                     │
  │  3. 创建标记                       │
  │  4. 渲染房源列表                   │
  │  5. 筛选交互                       │
  └─────────────────────────────────────┘

3.3 Python 生成 HTML

关键技巧：使用字符串拼接而非 f-string ，避免 JS 的 {} 被 Python 解析为字典。

python 复制代码 
def create_amap_html():
    """创建高德地图 JavaScript API HTML 页面"""

    # 构造房源 JS 数据（用 % 格式化避免 f-string 解析 JS 的 {}）
    houses_js = []
    for h in data:
        houses_js.append(
            "{id:%d, title:'%s', price:%d, area:%s, rooms:'%s', "
            "direction:'%s', address:'%s', district:'%s', "
            "lng:%s, lat:%s, tags:'%s', floor:'%s', years:'%s'}" % (
                h['id'], h['title'], h['price'], h['area'],
                h['rooms'], h['direction'], h['address'],
                h['district'], h['longitude'], h['latitude'],
                h['tags'], h['floor'], h['years']
            )
        )
    houses_js_str = ',\n        '.join(houses_js)
    total_count = len(data)
    district_count = len(set(h['district'] for h in data))

    # 使用三引号普通字符串 + 字符串拼接
    html_content = """<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>深圳租房地图 - 高德地图找房</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Microsoft YaHei', sans-serif; }
        #header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white; padding: 12px 20px;
            display: flex; align-items: center; justify-content: space-between;
        }
        #container { width: 100%; height: calc(100vh - 80px); }
        #sidebar {
            width: 320px; height: calc(100vh - 80px);
            position: absolute; right: 0; top: 48px;
            background: white; overflow-y: auto;
            border-left: 2px solid #eee; padding: 10px;
        }
        .house-card {
            border: 1px solid #eee; border-radius: 8px;
            padding: 10px; margin-bottom: 8px;
            cursor: pointer; transition: all 0.2s;
        }
        .price-badge {
            display: inline-block; padding: 2px 6px;
            border-radius: 3px; font-size: 11px; color: white;
        }
        .price-high { background: #FF0000; }
        .price-mid-high { background: #FF8C00; }
        .price-mid { background: #4ECDC4; }
        .price-low { background: #95E1D3; }
    </style>
</head>
<body>
    <div id="header">
        <h1>🏠 深圳租房地图 · 高德找房</h1>
        <div class="stats">共 """ + str(total_count) + """ 套房源 · 涵盖
            """ + str(district_count) + """ 个行政区</div>
    </div>

    <div class="filter-bar">
        <label>区域筛选:</label>
        <select id="districtFilter" onchange="filterHouses()">
            <option value="">全部</option>
            <option value="南山">南山</option>
            <option value="福田">福田</option>
            <!-- ... 更多区域 -->
        </select>
        <label>价格上限:</label>
        <input type="number" id="priceFilter" placeholder="元/月"
               onchange="filterHouses()">
        <label>面积下限:</label>
        <input type="number" id="areaFilter" placeholder="㎡"
               onchange="filterHouses()">
    </div>

    <div id="container"></div>
    <div id="sidebar">
        <h3>房源列表</h3>
        <div id="houseList"></div>
    </div>

    <!-- 高德地图 JS API -->
    <script src="https://webapi.amap.com/maps?v=2.0&key=your_amap_js_key_here"></script>
    <script>
        // 房源数据
        var houses = [
        """ + houses_js_str + """
        ];

        // 初始化地图
        var map = new AMap.Map('container', {
            zoom: 11,
            center: [114.058, 22.543],
            viewMode: '2D',
        });

        // 创建标记
        var markers = [];
        houses.forEach(function(h) {
            var marker = new AMap.Marker({
                position: new AMap.LngLat(h.lng, h.lat),
                title: h.title + ' - ' + h.price + '元/月',
                content: '<div class="price-badge '
                    + priceColorClass(h.price) + '">'
                    + h.price + '</div>',
                offset: new AMap.Pixel(-15, -15),
            });

            marker.on('click', function() {
                var infoWindow = new AMap.InfoWindow({
                    content: content,
                    offset: new AMap.Pixel(0, -30),
                });
                infoWindow.open(map, marker.getPosition());
            });

            markers.push(marker);
            map.add(marker);
        });

        // 添加控件
        map.addControl(new AMap.Scale());
        map.addControl(new AMap.ToolBar({ position: 'LB' }));
    </script>
</body>
</html>"""

    with open('/root/house_map_amap.html', 'w', encoding='utf-8') as f:
        f.write(html_content)

3.4 关键 JS 功能说明

3.4.1 价格颜色分级
javascript 复制代码 
function priceColorClass(price) {
    if (price >= 6000) return 'price-high';        // 红色
    if (price >= 4000) return 'price-mid-high';    // 橙色
    if (price >= 2500) return 'price-mid';          // 青色
    return 'price-low';                              // 浅绿
}
复制代码 
价格分级示意：

  ≥6000元    4000-5999元    2500-3999元    <2500元
  ┌────┐    ┌────┐        ┌────┐        ┌────┐
  │ 红 │    │ 橙 │        │ 青 │        │ 浅绿│
  └────┘    └────┘        └────┘        └────┘
  price-high price-mid-high price-mid   price-low
3.4.2 房源列表渲染
javascript 复制代码 
function renderHouseList(filtered) {
    var listHtml = '';
    filtered.forEach(function(h) {
        listHtml += '<div class="house-card" onclick="locateHouse(' + h.id + ')">'
            + '<div class="title">' + h.title + '</div>'
            + '<span class="price-badge ' + priceColorClass(h.price) + '">'
            + h.price + '元/月</span>'
            + '<div class="info">' + h.area + '㎡ · ' + h.rooms
            + ' · ' + h.district + '区</div>'
            + '<div class="tags">' + h.tags + '</div>'
            + '</div>';
    });
    document.getElementById('houseList').innerHTML = listHtml;
}
3.4.3 点击列表定位房源
javascript 复制代码 
function locateHouse(id) {
    var h = houses.find(function(h) { return h.id === id; });
    if (h) {
        map.setCenter([h.lng, h.lat]);  // 地图中心移动到该房源
        map.setZoom(15);                 // 放大到街道级

        // 弹出信息窗体
        var marker = markers.find(function(m) {
            return m.houseData.id === id;
        });
        if (marker) {
            var infoWindow = new AMap.InfoWindow({
                content: content,
                offset: new AMap.Pixel(0, -30),
            });
            infoWindow.open(map, marker.getPosition());
        }
    }
}
3.4.4 多条件筛选
javascript 复制代码 
function filterHouses() {
    var district = document.getElementById('districtFilter').value;
    var maxPrice = parseInt(document.getElementById('priceFilter').value) || 99999;
    var minArea = parseInt(document.getElementById('areaFilter').value) || 0;

    // 过滤房源
    var filtered = houses.filter(function(h) {
        var matchDistrict = !district || h.district === district;
        var matchPrice = h.price <= maxPrice;
        var matchArea = h.area >= minArea;
        return matchDistrict && matchPrice && matchArea;
    });

    // 清除旧标记
    map.remove(markers);

    // 添加筛选后的标记
    var newMarkers = [];
    filtered.forEach(function(h) {
        var marker = new AMap.Marker({
            position: new AMap.LngLat(h.lng, h.lat),
            content: '<div class="price-badge '
                + priceColorClass(h.price) + '">' + h.price + '</div>',
            offset: new AMap.Pixel(-15, -15),
        });
        newMarkers.push(marker);
        map.add(marker);
    });

    markers = newMarkers;
    renderHouseList(filtered);
}

3.5 运行结果

复制代码 
root@node-04:~# python3 gaode_visualize.py
Python 高德地图找房 - 地图可视化
服务器: ecs-11e6-0004

============================================================
第一部分：folium 交互式地图
============================================================
  已添加 25 个标记
  热力图已添加
  已添加 9 个区域标记
  folium 地图已保存: /root/house_map_folium.html

============================================================
第二部分：高德地图 JavaScript API HTML 页面
============================================================
  高德JS API HTML已保存: /root/house_map_amap.html

地图可视化完成！输出文件：
  /root/house_map_folium.html - folium交互式地图
  /root/house_map_amap.html   - 高德JS API地图页面

3.6 高德 JS API 方法速查表

方法/类 说明 示例
AMap.Map(container, opts) 创建地图实例 Map('div', {zoom:11, center:[]})
AMap.Marker(opts) 创建标记点 Marker({position: LngLat, title})
AMap.InfoWindow(opts) 信息窗体 InfoWindow({content: html})
AMap.LngLat(lng, lat) 经纬度对象 LngLat(114.058, 22.543)
AMap.Scale() 比例尺控件 map.addControl(new Scale())
AMap.ToolBar() 工具栏控件 map.addControl(new ToolBar())
marker.on('click', fn) 标记点击事件 marker.on('click', callback)
map.setCenter([lng,lat]) 设置地图中心 map.setCenter([114,22])
map.setZoom(level) 设置缩放级别 map.setZoom(15)
map.add/remove(marker) 添加/移除标记 map.add(marker)

四、踩坑记录

4.1 坑1：f-string 解析 JS 花括号（最严重）

问题 ：使用 Python f-string 生成 HTML 时，JS 对象的 {} 被 Python 解析为字典表达式：

python 复制代码 
# 错误写法 - f-string 会解析 JS 的 {}
html = f"""
<script>
    var map = new AMap.Map('container', {{
        zoom: 11,           // {{ 需要转义
    }});
    houses.forEach(function(h) {{
        var marker = new AMap.Marker({
            position: new AMap.LngLat(h.lng, h.lat),  // {} 被解析为字典！
        });
    }});
</script>
"""

错误信息：

复制代码 
KeyError: 'position: new AMap.LngLat(h.lng, h.lat)'

解决方案：改用普通字符串 + 字符串拼接：

python 复制代码 
# 正确写法 - 使用三引号普通字符串
html_content = """<script>
    var map = new AMap.Map('container', {
        zoom: 11,
    });
</script>"""

# 动态数据用 % 格式化或字符串拼接
houses_js_str = ',\n'.join(houses_js)
html_content = html_content + houses_js_str + """</script>"""

4.2 坑2：中文字体缺失

问题：matplotlib 生成的图表中文显示为方框。

复制代码 
# 解决方案
apt-get install -y fonts-noto-cjk

# Python 中设置
plt.rcParams['font.sans-serif'] = ['Noto Sans CJK SC', 'SimHei', 'DejaVu Sans']
plt.rcParams['axes.unicode_minus'] = False

4.3 坑3：服务器无 GUI 环境

问题：matplotlib 默认使用 TkAgg 后端，服务器无显示设备会报错。

复制代码 
_tkinter.TclError: no display name and no $DISPLAY environment variable

解决方案：

python 复制代码 
import matplotlib
matplotlib.use('Agg')  # 必须在 import pyplot 之前设置
import matplotlib.pyplot as plt

4.4 坑4：高德 JS API Key 类型

问题 ：使用 Web 服务 Key 打开 JS API 地图会报 INVALID_USER_KEY。

原因：高德 Key 分为不同类型，JS API 需要专门的「Web端(JS API)」类型 Key。

复制代码 
高德 Key 类型：

  ┌─────────────┬────────────────────────────┐
  │ Web服务     │ REST API 调用（地理编码等）  │
  │             │ restapi.amap.com            │
  ├─────────────┼────────────────────────────┤
  │ Web端(JS API)│ 浏览器端 JS SDK            │
  │             │ webapi.amap.com/maps        │
  ├─────────────┼────────────────────────────┤
  │ Android SDK │ 安卓 App                    │
  ├─────────────┼────────────────────────────┤
  │ iOS SDK     │ iOS App                     │
  └─────────────┴────────────────────────────┘

4.5 坑5：boxplot labels 参数移除

问题 ：matplotlib 3.10+ 移除了 boxplot() 的 labels 参数。

复制代码 
TypeError: Axes.boxplot() got an unexpected keyword argument 'labels'

解决方案：

python 复制代码 
# 旧写法（报错）
bp = ax.boxplot(data, labels=names)

# 新写法
bp = ax.boxplot(data, patch_artist=True)
ax.set_xticklabels(names)

五、两个 HTML 页面对比

5.1 功能对比

功能 folium 版 高德 JS API 版
地图底图 OpenStreetMap 高德地图（更清晰）
房源标记 ✅ ✅
信息弹窗 ✅ HTML 弹窗 ✅ InfoWindow
价格热力图 ✅ HeatMap ❌（需额外开发）
区域圆标 ✅ CircleMarker ❌
区域筛选 ❌ ✅ 下拉框
价格筛选 ❌ ✅ 输入框
面积筛选 ❌ ✅ 输入框
房源列表 ❌ ✅ 侧边栏卡片
点击定位 ❌ ✅ locateHouse()
比例尺 ✅ ✅
工具栏 ❌ ✅ ToolBar
需要 Key ❌ ✅ JS API Key
文件大小 65KB 16KB

5.2 使用建议

复制代码 
选择决策树：

  是否需要复杂交互（筛选/列表）？
      │
      ├── 是 ──> 高德 JS API 方案
      │         （需申请 JS API Key）
      │
      └── 否 ──> 是否需要热力图？
                    │
                    ├── 是 ──> folium 方案
                    │         （无需 Key，开箱即用）
                    │
                    └── 否 ──> 两者皆可

六、完整数据流回顾

复制代码 
全流程数据流（4台服务器协作）：

node-01 (1.94.202.19)          node-02 (120.46.159.92)
┌─────────────────────┐        ┌─────────────────────┐
│ gaode_crawler.py    │        │ gaode_geocode.py    │
│                     │        │                     │
│ requests + BS4      │  SCP   │ 高德 API 地理编码   │
│ 25条房源数据采集    │ ─────> │ 地址→经纬度坐标     │
│                     │        │                     │
│ houses.csv (3.1KB)  │        │ houses_geocoded.json│
│ houses.json (7.5KB) │        │ houses_geocoded.csv  │
└─────────────────────┘        └─────────────────────┘
                                         │
                                    SCP  │
                                         ▼
node-03 (124.70.105.142)       node-04 (120.46.44.194)
┌─────────────────────┐        ┌─────────────────────┐
│ gaode_analysis.py   │        │ gaode_visualize.py   │
│                     │        │                     │
│ pandas 统计分析     │  SCP   │ folium 交互式地图   │
│ matplotlib 六图     │ <───── │ 高德 JS API HTML    │
│                     │        │                     │
│ plot_*.png × 6     │        │ house_map_folium    │
│ (dashboard)         │        │ house_map_amap      │
└─────────────────────┘        └─────────────────────┘

七、小结

7.1 三篇博客核心知识点

篇号 知识点 核心库
第一篇 HTTP 请求、HTML 解析、CSV 存储 requests, BeautifulSoup, csv
第二篇 地理编码、数据分析、图表绘制 高德 API, pandas, matplotlib
第三篇 交互式地图、JS API、HTML 开发 folium, 高德 JS API

7.2 产出文件汇总

文件 服务器 大小 说明
houses.csv node-01 3.1 KB 原始房源数据
houses.json node-01 7.5 KB JSON 格式
houses_geocoded.json node-02 8.8 KB 含坐标数据
houses_geocoded.csv node-02 3.5 KB 含坐标 CSV
plot_district_price.png node-03 64 KB 各区均价柱状图
plot_price_distribution.png node-03 47 KB 价格分布直方图
plot_area_price_scatter.png node-03 67 KB 面积-价格散点图
plot_unit_price_rank.png node-03 49 KB 各区单价排名
plot_room_type_box.png node-03 44 KB 户型价格箱线图
plot_dashboard.png node-03 143 KB 综合仪表盘
house_map_folium.html node-04 66 KB folium 交互式地图
house_map_amap.html node-04 16 KB 高德 JS API 地图

7.3 关键分析结论

  • 福田区 均价最高（6120元/月），龙岗区最低（2167元/月），差距 2.8 倍
  • 南山区单价最高（74.4元/㎡/月），科技园和后海区域拉高均价
  • 合租单间均价 1483 元，是整租均价（4070元）的 36%
  • 近地铁标签出现 10 次，是最常见卖点
  • 面积与价格呈正相关，但南山/福田存在明显的区位溢价

相关链接

相关推荐
谭光志1 小时前
AI 是怎么操作浏览器的——browser use 实现原理
前端·javascript·ai编程
weixin_471383031 小时前
args，...args与Parameters＜T＞
开发语言·前端
用户3074596982071 小时前
GatewayWorker 从零到一完整指南
javascript·php
曲幽1 小时前
Anki插件开发必知必会：钩子函数与右键菜单定制
python·fastapi·anki·menu·browser·addons
铁皮饭盒1 小时前
Bun.redis真正的强项
javascript
技术工小李1 小时前
现场评分系统｜景泰2026“农创客”杯大赛实战应用宣传
python
用户938515635071 小时前
Node.js 路径与文件系统：从基础到异步进化之路
javascript·后端·面试
ctrl_v助手2 小时前
C#表达题笔记
开发语言·c#
Cobyte2 小时前
23.Vue Vapor 组件 attrs 的实现
前端·javascript·vue.js
热门推荐
012026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？022026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf03GitHub 镜像站点042026 年 AI 大模型 & AI 编程工具实战全总结05AI科技热点日报 | 2026年07月01日06AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路07【AI】2026 年具身智能模型和世界模型总结082026 AI 编程工具选型横评：Cursor / Claude Code / Trae / Copilot 到底选谁（建议收藏·避坑版）09Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析102026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片