需借助第三方地图API或原生地理接口实现：一、百度地图API需申请AK密钥，引入SDK，创建容器并用Marker标注；二、Leaflet+OpenStreetMap免密钥，引入CSS/JS，用L.marker添加弹出标注；三、Geolocation API获取用户实时位置后动态标注；四、SVG可手动映射经纬度为像素坐标静态绘图。
如果您希望在HTML5文档中嵌入交互式地图并添加自定义坐标标注，则需借助第三方地图服务API或原生地理定位接口。以下是实现此目标的具体操作步骤：
一、使用百度地图JavaScript API嵌入地图并标注点
百度地图API提供免费调用配额，支持在HTML5页面中加载地图容器、设置中心坐标、缩放级别，并通过Marker类添加带标签的标注点。需先申请密钥并引入SDK脚本。
1、访问百度地图开放平台注册账号，创建应用获取AK（Access Key）。
2、在HTML文档的<head>中插入百度地图JS SDK引用，将YOUR_AK替换为实际申请的密钥：
<script src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK"></script>
立即学习“前端免费学习笔记（深入）”；
3、在<body>中添加地图容器元素，并设置固定宽高与CSS样式：
<div id="map" style="width: 600px; height: 400px;"></div>
4、在<script>标签内初始化地图实例，设置中心点经纬度（如北京天安门：116.404, 39.915），并添加标注：
var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915));
map.addOverlay(marker);
二、使用OpenStreetMap配合Leaflet库实现轻量地图嵌入
Leaflet是开源JavaScript库，不依赖商业密钥，适合离线部署或对数据主权有要求的场景。它通过瓦片图层加载OpenStreetMap底图，并支持GeoJSON格式坐标标注。
1、在<head>中引入Leaflet CSS与JS文件：
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
2、在<body>中创建地图容器：
<div id="map" style="width: 600px; height: 400px;"></div>
3、编写初始化脚本，设置视图中心与缩放级别，并加载OSM标准图层：
var map = L.map('map').setView([39.915, 116.404], 15);
L.tileLayer('https://{a-d}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
4、添加带弹出文本的标注点：
var marker = L.marker([39.915, 116.404]).addTo(map);
marker.bindPopup("天安门广场").openPopup();
三、利用HTML5 Geolocation API获取用户当前位置并标注
Geolocation API可请求浏览器授权获取设备实时经纬度，无需第三方地图服务，但需配合地图库渲染位置点。该方法适用于定位用户自身而非预设坐标。
1、检测浏览器是否支持地理定位功能：
if ("geolocation" in navigator) { ... } else { alert("您的浏览器不支持地理位置定位"); }
2、调用getCurrentPosition方法获取坐标：
navigator.geolocation.getCurrentPosition(
function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
console.log("纬度：" + lat + "，经度：" + lng);
},
function(error) { console.error("定位失败：" + error.message); }
);
3、将获取到的lat和lng值传入Leaflet或百度地图的Marker构造函数中完成动态标注。
四、通过SVG内联方式手动绘制简易地理坐标区域图
当仅需静态展示少量坐标点且无交互需求时，可使用原生SVG元素定义视图框，按比例将经纬度映射为像素坐标，以<circle>或<text>元素直接标注。
1、确定地理范围边界（如最小纬度、最大纬度、最小经度、最大经度），计算比例系数：
var scaleX = 600 / (maxLng - minLng);
var scaleY = 400 / (maxLat - minLat);
2、将某点经纬度转换为SVG坐标（Y轴需翻转）：
var x = (lng - minLng) * scaleX;
var y = 400 - (lat - minLat) * scaleY;
3、在<svg width="600" height="400">中插入圆形标注：
<circle cx="320" cy="210" r="5" fill="red"/>
<text x="325" y="205" font-size="12">起点</text>
