Geolocation API不支持批量导入坐标点，仅能获取单个设备位置；批量打点需依赖地图SDK（如Leaflet）循环创建标记，并注意坐标顺序、数据格式、异步加载及视野适配。
HTML5里用Geolocation API没法批量导入坐标点
直接说结论：Geolocation API只负责获取当前设备位置，不支持读取、解析或渲染任何坐标列表。想“批量导入坐标点”，本质是前端地图 SDK 的事，和 HTML5 原生地理定位无关。
常见误解是以为 navigator.geolocation.getCurrentPosition() 能喂进一堆经纬度——它不能。它只返回一个 position 对象，里面只有 coords.latitude 和 coords.longitude 这一对值。
真正批量导入要用地图 SDK 的 Marker 或 OverlayView 批量添加
主流方案是引入百度地图、高德地图或 Leaflet（推荐）这类 SDK，然后循环创建标记。关键不是“调用 HTML5”，而是“用 JS 控制地图实例”。
以 Leaflet 为例（轻量、开源、无密钥限制）：
立即学习“前端免费学习笔记（深入）”；
const map = L.map('map').setView([39.9, 116.4], 13);
L.tileLayer('https://{a-d}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
const points = [
{ lat: 39.91, lng: 116.40, name: '天安门' },
{ lat: 39.98, lng: 116.32, name: '中关村' },
{ lat: 39.85, lng: 116.45, name: '首都机场' }
];
points.forEach(p => {
L.marker([p.lat, p.lng])
.bindPopup(p.name)
.addTo(map);
});
-
points数组就是你的“批量坐标源”，可来自 JSON 文件、API 接口或静态定义 - 注意经纬度顺序：Leaflet 是
[lat, lng]，高德/百度是lng, lat，顺序错会导致点全飘到非洲 - 如果点超过几百个，别用
L.marker逐个加，改用L.layerGroup或L.GeoJSON提升性能
从 CSV 或 JSON 文件读坐标时，记得处理异步和跨域
浏览器直接用 fetch('./points.json') 读本地文件会触发 CORS 错误（除非走本地服务器），开发时容易卡在这儿。
- 开发阶段用
live-server或 VS Code 的 Live Server 插件起个本地 HTTP 服务 - JSON 文件确保格式合法，字段名统一（比如别混用
lat/latitude） - CSV 需用 PapaParse 等库解析，不能靠
split(',')—— 含逗号的地址字段会崩 - 坐标值必须是数字类型，字符串如
"39.91"要parseFloat()转一下，否则地图可能静默失败
移动端批量打点要注意 fitBounds 和缩放层级
点一多，用户打开地图可能只看到一片空白——因为默认视角没覆盖任何点。得主动调整视野。
- 用
map.fitBounds(L.latLngBounds(points.map(p => [p.lat, p.lng])))自动缩放到所有点可见范围 - 但点跨度过大（比如全国范围）时，
fitBounds会把缩放拉得太远，建议加maxZoom: 12限制 - 部分安卓 WebView 对
setTimeout批量创建 marker 有延迟，可改用requestAnimationFrame分帧渲染
NaN、null 或超界值（如纬度写成 200）会让整个循环中断，连报错都看不到。 
