从交互式地图爬取交通摄像头图片源URL的技术求助

针对你提到的两个不同类型的交通摄像头地图网站，以下是具体的爬取实现方案，使用Selenium处理动态加载内容，解决之前无法提取图片源的问题：

一、tripcheck.com 爬取方法 #

该网站的摄像头图片多以CSS背景图形式加载，而非直接的img标签，需从元素样式中提取URL：

• 初始化Selenium浏览器，等待地图核心区域加载完成
• 定位摄像头标记元素，点击触发图片弹窗（部分场景需此操作）
• 从弹窗容器的style属性中匹配背景图URL
• 收集所有URL并导出为JSON/CSV格式

示例代码：

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import re
import json

# 初始化浏览器
driver = webdriver.Chrome()
driver.get("https://tripcheck.com/")

# 等待地图容器加载（需用F12查看实际页面的元素选择器）
WebDriverWait(driver, 15).until(
    EC.presence_of_element_located((By.CSS_SELECTOR, "#map"))
)

# 定位所有摄像头标记点
camera_markers = driver.find_elements(By.CSS_SELECTOR, ".camera-icon")

camera_url_list = []
for marker in camera_markers:
    # 点击标记打开摄像头预览弹窗
    marker.click()
    # 等待弹窗内的图片容器加载
    img_container = WebDriverWait(driver, 8).until(
        EC.presence_of_element_located((By.CSS_SELECTOR, ".camera-preview"))
    )
    # 从style属性提取背景图URL
    style_attr = img_container.get_attribute("style")
    url_match = re.search(r'url\(["\']?(.*?)["\']?\)', style_attr)
    if url_match:
        camera_url = url_match.group(1)
        camera_url_list.append({"camera_url": camera_url})

# 导出为JSON文件
with open("tripcheck_cameras.json", "w", encoding="utf-8") as f:
    json.dump(camera_url_list, f, indent=2)

driver.quit()

二、Caltrans iframe地图爬取方法 #

该网站的地图嵌套在iframe中，需先切换Selenium的上下文到iframe内，再进行元素提取：

• 打开页面后，定位iframe元素并切换上下文
• 等待iframe内的地图及摄像头元素加载完成
• 直接提取img标签的src属性（若存在），或按背景图方式提取URL
• 收集URL并导出为CSV格式

示例代码：

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import csv

driver = webdriver.Chrome()
driver.get("https://cwwp2.dot.ca.gov/vm/iframemap.htm")

# 定位并切换到目标iframe（用F12查看iframe的实际ID/属性）
target_iframe = WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.ID, "caltrans-map-iframe"))
)
driver.switch_to.frame(target_iframe)

# 等待iframe内的摄像头图片元素加载
camera_imgs = WebDriverWait(driver, 12).until(
    EC.presence_of_all_elements_located((By.CSS_SELECTOR, "img.traffic-camera"))
)

camera_url_list = []
for img in camera_imgs:
    img_src = img.get_attribute("src")
    if img_src:
        camera_url_list.append(img_src)

# 导出为CSV文件
with open("caltrans_cameras.csv", "w", newline="", encoding="utf-8") as f:
    writer = csv.writer(f)
    writer.writerow(["Camera URL"])
    for url in camera_url_list:
        writer.writerow([url])

# 切回主页面（可选操作）
driver.switch_to.default_content()
driver.quit()

关键注意事项 #

• 元素选择器调整：代码中的CSS选择器需替换为你通过浏览器F12工具查看的实际元素class/ID，页面版本更新后可能需要重新确认
• 动态加载等待：必须使用WebDriverWait等待元素加载，避免因页面未渲染完成导致提取失败
• 反爬规避：可适当添加time.sleep()降低请求频率，或使用代理IP避免被网站封禁
• 背景图处理：若遇到无img标签的场景，统一用正则从style属性的background-image字段中提取URL

内容的提问来源于stack exchange，提问作者Messen