如何在 html5 中的 <img> 标记中的特定点的图像上显示点图标，如谷歌地图

【问题标题】：How to show point icon on image at specific point in <img> tag in html5 like google maps如何在 html5 中的 <img> 标记中的特定点的图像上显示点图标，如谷歌地图
【发布时间】：2016-09-03 11:34:10
【问题描述】：

我们有一个图像标签，当用户点击图像上的特定点时，我想在该位置显示一个点图标，就像谷歌地图在地图上显示的那样。

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。

标签： javascript css html html5-canvas

【解决方案1】：

例如，您可以执行以下操作：

Javascript

var $clickable = $('#clickable');
$clickable.on('click', function(e) {
  var $pointer;
  $clickable.append('<div class="pointer" />');
  $pointer = $clickable.find('.pointer');
  $pointer.css({
    top: event.pageY - $clickable.offset().top,
    left: event.pageX - $clickable.offset().left
  })
  e.preventDefault();
})

请查看https://jsfiddle.net/xonqq259/1/ 以获取工作示例。

您需要一个相对包装器并添加一个具有绝对定位的指针元素。

【讨论】：