Question

我试图借助html的map属性在图像上绘制一个圆圈。我在javascript中绘制一个图像和onclick图像我添加了map属性的区域坐标。但我得到了空错误。

代码：

 <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='#' />";
}

我收到错误未捕获的TypeError：无法读取属性＆＃39; innerHTML＆＃39;为null

Answer 1

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

但是对于您的查询：

实际上你必须先通过Tag

获取元素
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 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在图像上绘制地图（圆圈）

2 个答案:

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