baidu_38409770
2017-05-11 03:21
采纳率: 42.9%
浏览 2.7k

在html上的图片上点击标记一个位置,再点击标记另外一个位置,取消前一个

想在html上做一个类似百度地图一样的网页,用鼠标点击图片(地图)某个位置,标记出来,再点击另外一个位置也标记出来,但是前一个标记不取消,怎么做到取消呢,每次点击都是一个位置显示出来

<style>
    html,body{margin:0px;height:100%;}
    #dv{width:100%;height:100%;margin:0px auto;}
    .img .marker{position:absolute;width:10px;height:10px;background:#f00;}
</style>
<div class="img" id="dv">
    <img src="F:\毕业设计\新建文件夹\map.png" alt="map""></div>
<script>
    function createMarker(x, y) {
        var div = document.createElement('div');
        div.className = 'marker'; div.style.left = x + 'px'; div.style.top = y + 'px';
        document.getElementById('dv').appendChild(div
            )
    }
    document.getElementById('dv').onclick = function (e) {
        e = e || window.event;
        var x = e.offsetX || e.layerX, y = e.offsetY || e.layerY;
        createMarker(x, y);
    }
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 已采纳
    
        function createMarker(x, y) {
            var img = document.getElementById('imgMarker');
            if (!img) {//不存在创建
                img = document.createElement('img'); img.id = 'imgMarker'; img.src = '图片地址'; img.className = 'marker';
                document.getElementById('dv').appendChild(img)
            }
            img.style.left = x + 'px'; img.style.top = y + 'px';
        }
    
    打赏 评论
  • Rattenking 2017-05-11 03:44

    在你添加div的前一步,将内部所有div删除,就可以取消。

    打赏 评论

相关推荐 更多相似问题