HTML 在图像上绘制地图（圆形）

Question

我想借助 html 的地图属性在图像上画一个圆圈。我在 javascript 中绘制了一张图像并点击了图像我正在添加地图属性的区域坐标。但我收到空错误。

代码：

 <div id="pointer_div"  onclick="point_it(event)" style="width: 500px; height: 333px;">
<asp:Image class="mappies" ID="image1" usemap="#parking_map" runat="server" Width="500px" imageUrl="image1.jpg" />
<map name="parking_map" id="imagemap1" runat="server"></map>
 </div>

在javascript点击图片的方法中，我得到了图片的坐标和绘制地图区域

<script language="JavaScript">
    function point_it(event) {
        pos_x = event.offsetX ? (event.offsetX) : event.layerX - document.getElementById("pointer_div").offsetLeft;
        pos_y = event.offsetY ? (event.offsetY) : event.layerY - document.getElementById("pointer_div").offsetTop;alert(pos_x);
        alert(pos_y);
        map.innerHTML += "<area class='location_1' title='ab' shape='circle' coords='70,70,9' target='_self' alt='ab' href='#' />";
}

我收到错误 未捕获类型错误：无法读取 null

的属性 'innerHTML'

Answer 1

area 标签只是定义了 space 用户可以点击的区域，没有可视化表示，因此您无法真正看到它。

但是对于您的查询：

实际上你必须先获取元素 要么通过标签

  var map= document.getElementsByTagName("map")[0];

或通过 ID 作为

  var map= document.getElementById("imagemap1")

然后使用

map.innerHTML += "<area class='location_1' title='ab' shape='circle' coords='70,70,9' target='_self' alt='ab' href='#' />";

Answer 2

地图标签实际上不会画一个圆，只是给你一个圆形的可点击区域。您可能想要的是使用 html5 canvas 标签。首先创建一个canvas，然后在canvas中绘制图像，然后在上面绘制一个圆圈。

<canvas id="example" width="500" height="333">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

<script language="JavaScript">
    var example = document.getElementById('example');
    var context = example.getContext('2d');

    var imageObj = new Image();
    imageObj.onload = function() { // function called after image has loaded all drawing needs to be here
        context.drawImage(imageObj, 0, 0);

        context.lineWidth = 1; 
        context.strokeStyle = 'black';
        context.context.beginPath();
        context.arc(250, 166, 100, 0, Math.PI*2);
        context.stroke();
    };
    imageObj.src = 'image1.jpg';

HTML 在图像上绘制地图（圆形）

HTML drawing map(circle) on image

html

javascript

dictionary

image

area 标签只是定义了 space 用户可以点击的区域，没有可视化表示，因此您无法真正看到它。