需借助第三方地图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文档的

3、在

4、在

二、使用OpenStreetMap配合Leaflet库实现轻量地图嵌入

Leaflet是开源JavaScript库，不依赖商业密钥，适合离线部署或对数据主权有要求的场景。它通过瓦片图层加载OpenStreetMap底图，并支持GeoJSON格式坐标标注。

1、在

2、在

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元素定义视图框，按比例将经纬度映射为像素坐标，以或元素直接标注。

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">中插入圆形标注：
320" cy="210" r="5" fill="red"/>
325" y="205" font-size="12">起点