首先通过Geolocation API持续获取用户位置并记录坐标，然后将经纬度映射到Canvas像素坐标，最后以半透明圆点叠加绘制形成热力效果；随着位置点累积，高密度区域颜色更深，实现简单移动轨迹热力图。
要利用 Geolocation API 和 Canvas 绘制用户移动轨迹的热力图，核心在于持续获取用户位置、记录坐标点，并通过 Canvas 以颜色密度的方式渲染这些点，模拟出“热点”区域。以下是具体实现思路和步骤：
获取用户地理位置
使用浏览器提供的 Geolocation API 实时获取用户的经纬度信息。需要调用 navigator.geolocation.watchPosition() 来持续监听位置变化。
示例代码：
let positions = [];if (navigator.geolocation) { navigator.geolocation.watchPosition( (position) => { const { latitude, longitude } = position.coords; positions.push({ lat: latitude, lng: longitude }); }, (error) => console.error("定位失败:", error), { enableHighAccuracy: true, maximumAge: 10000, timeout: 5000 } ); } else { console.log("浏览器不支持地理定位"); }
设置 Canvas 并映射地理坐标
将地图区域（如某个城市范围）映射到 Canvas 的像素坐标系中。你需要定义一个可视区域的边界（最小/最大经纬度），然后将每个 GPS 点转换为画布上的 x、y 坐标。
转换函数示例：
function toCanvasX(lng, minLng, maxLng, width) {
return ((lng - minLng) / (maxLng - minLng)) * width;
}
function toCanvasY(lat, minLat, maxLat, height) {
return height - ((lat - minLat) / (maxLat - minLat)) * height; // 纬度倒置
}
注意：实际项目中可结合地图缩放和平移进行更精确的投影处理，但简单热力图可用线性映射。
在 Canvas 上绘制热力点
每获取一个新位置，就在 Canvas 上对应位置绘制一个半透明的圆形，多个重叠的点自然形成高亮区域，模拟热力效果。
实现方式：
- 清空画布或保留旧点（用于累积轨迹）
- 遍历所有记录的位置点
- 将每个点转换为 Canvas 坐标
- 用
fillRect或arc绘制小圆点，使用 RGBA 颜色设置透明度
示例绘制逻辑：
const canvas = document.getElementById("heatmap");
const ctx = canvas.getContext("2d");
function drawHeatmap() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 可选：不清空则轨迹累积
const minLng = 116.2, maxLng = 116.5; // 示例北京某区域
const minLat = 39.8, maxLat = 40.0;
positions.forEach((pos) => {
const x = toCanvasX(pos.lng, minLng, maxLng, canvas.width);
const y = toCanvasY(pos.lat, minLat, maxLat, canvas.height);
ctx.fillStyle = "rgba(255, 0, 0, 0.3)";
ctx.beginPath();
ctx.arc(x, y, 5, 0, Math.PI * 2); // 半径5像素的圆
ctx.fill();
});
}
随着时间推移，频繁出现的位置会因叠加而颜色更深，形成类似热力图的效果。
优化与增强建议
若需更真实的热力图效果，可考虑以下改进：
-
高斯模糊：在 Canvas 上绘制完所有点后，使用
ctx.filter = "blur(5px)"添加模糊，使热点更平滑 - 颜色渐变：根据点密度动态着色（红 > 黄 > 蓝），可通过离屏 Canvas 或图像数据手动计算密度
- 限制存储点数：避免内存溢出，只保留最近 N 个点
- 权限提醒：确保页面是 HTTPS 且用户已授权定位
基本上就这些。不需要复杂库也能实现基础移动轨迹热力图，关键是持续采集位置 + Canvas 叠加渲染。
