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

Question

想在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);
    }

Answer 1

    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';
    }