如何利用 Geolocation API 和 Canvas 绘制用户移动轨迹的热力图？-js教程-PHP中文网

如何利用 Geolocation API 和 Canvas 绘制用户移动轨迹的热力图？

狼影

发布： 2025-09-30 14:15:01

原创

339人浏览过

首先通过Geolocation API持续获取用户位置并记录坐标，然后将经纬度映射到Canvas像素坐标，最后以半透明圆点叠加绘制形成热力效果；随着位置点累积，高密度区域颜色更深，实现简单移动轨迹热力图。

如何利用 geolocation api 和 canvas 绘制用户移动轨迹的热力图？

要利用 Geolocation API 和 Canvas 绘制用户移动轨迹的热力图，核心在于持续获取用户位置、记录坐标点，并通过 Canvas 以颜色密度的方式渲染这些点，模拟出“热点”区域。以下是具体实现思路和步骤：

获取用户地理位置

使用浏览器提供的 Geolocation API 实时获取用户的经纬度信息。需要调用 navigator.geolocation.watchPosition() 来持续监听位置变化。

示例代码：

let positions = [];
<p>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("浏览器不支持地理定位");
}</p>

登录后复制

设置 Canvas 并映射地理坐标

将地图区域（如某个城市范围）映射到 Canvas 的像素坐标系中。你需要定义一个可视区域的边界（最小/最大经纬度），然后将每个 GPS 点转换为画布上的 x、y 坐标。

转换函数示例：

function toCanvasX(lng, minLng, maxLng, width) {
  return ((lng - minLng) / (maxLng - minLng)) * width;
}
<p>function toCanvasY(lat, minLat, maxLat, height) {
return height - ((lat - minLat) / (maxLat - minLat)) * height; // 纬度倒置
}</p>

登录后复制

注意：实际项目中可结合地图缩放和平移进行更精确的投影处理，但简单热力图可用线性映射。

在 Canvas 上绘制热力点

每获取一个新位置，就在 Canvas 上对应位置绘制一个半透明的圆形，多个重叠的点自然形成高亮区域，模拟热力效果。

Boomy

AI音乐生成工具，创建生成音乐,与世界分享.

272

查看详情

实现方式：

清空画布或保留旧点（用于累积轨迹）
遍历所有记录的位置点
将每个点转换为 Canvas 坐标
用 fillRect 或 arc 绘制小圆点，使用 RGBA 颜色设置透明度

示例绘制逻辑：

const canvas = document.getElementById("heatmap");
const ctx = canvas.getContext("2d");
<p>function drawHeatmap() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 可选：不清空则轨迹累积</p><p>const minLng = 116.2, maxLng = 116.5; // 示例北京某区域
const minLat = 39.8, maxLat = 40.0;</p><p>positions.forEach((pos) => {
const x = toCanvasX(pos.lng, minLng, maxLng, canvas.width);
const y = toCanvasY(pos.lat, minLat, maxLat, canvas.height);</p><pre class='brush:php;toolbar:false;'>ctx.fillStyle = "rgba(255, 0, 0, 0.3)";
ctx.beginPath();
ctx.arc(x, y, 5, 0, Math.PI * 2); // 半径5像素的圆
ctx.fill();

登录后复制

}); }

随着时间推移，频繁出现的位置会因叠加而颜色更深，形成类似热力图的效果。