HTML5本身无内置地图组件，点击图标展示图片需依赖JavaScript+第三方地图SDK（如高德）；用仅支持静态图像映射，无法动态展示图片。
HTML5 地图点击图标展示图片的关键限制
HTML5 本身没有内置地图组件，
使用高德地图 SDK 实现点击 Marker 展示图片
这是目前最常见且稳定的方案。核心是：创建 AMap.Marker，监听 click 事件，在回调中用原生 DOM 插入 ![HTML5调用地图点击图标如何展示图片【操作】]()
。
实操要点：
- 必须引入高德 JS API（带 valid key），否则
AMap 全局对象不存在
-
AMap.Marker 的 content 参数可传入 HTML 字符串，但仅限纯文本或简单标签；若需复杂交互（如点击关闭、加载失败处理），建议用 AMap.InfoWindow 配合 marker.openInfoWindow()
- 图片路径推荐用绝对 URL 或 base64，避免相对路径在地图容器内因 base href 或 iframe 导致 404
- 注意 Z-index：InfoWindow 默认层级可能被其他 DOM 覆盖，需手动设
zIndex: 9999
简例（点击 marker 弹出含图片的 infoWindow）：
立即学习“前端免费学习笔记（深入）”；
const marker = new AMap.Marker({
position: [116.487, 39.997],
map: map
});
const infoWindow = new AMap.InfoWindow({
content: '
@@##@@https://www.php.cn/link/20004d9171f2c39562975a104b3b9d7d" width="200" />
',
size: new AMap.Size(220, 0),
zIndex: 9999
});marker.on('click', () => {
infoWindow.open(map, marker.getPosition());
});
用
