创建有角度的动态移动标记

Question

我有一张图片，并使用html map和area标签将图片分为不同区域。我也在此图像上放置了一个标记，当我将鼠标悬停在图像上时，该标记会显示该区域的温度值。我想创建一个可以移动到图像中不同区域的标记。

component.html

    <div fxFlex="50%">
        <img src="../../assets/floor2.jpg" class="floor" usemap="#floor2Map">
        <map name="floor2Map">
          <area shape="poly" coords="210,340,216,234,312,236,323,323,317,346">
          <area shape="poly" coords="some cordinates">
          <area shape="poly" coords="some cordinates"> 
          <area shape="poly" coords="some cordinates"> 
          <div id='pin-1' class="box">
            <div class="pin-text">
              <p>Temperature : {{temperature}}</p>
              <p>Humidity : {{humidity}} </p>
            </div>
          </div>
        </map>
    </div>

component.css

.box:hover > .pin-text {
    display: block;
  }

  .box {
    top : 220px ;
    left : 120px;
    width:8%;
    height:8%;
    background-image: url('http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg');
    /* background-image: url('../../assets/'); */
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute; 
  }

  .pin-text {
    position: absolute;
    top:50%;
    transform:translateY(-50%);
    left:75%;
    white-space:nowrap;
    display: none;
  }

我想通过将其拖动到其他位置来移动该标记。怎么做？

Answer 1

很简单。如果要更改其在CSS中的位置，只需在此处更改top和left的值：

  .box {
    top : 220px ;
    left : 120px;
    width:8%;
    height:8%;
    background-image: url('http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg');
    /* background-image: url('../../assets/'); */
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute; 
  }

如果要通过Javascript移动它，则：

var firstBox = document.getElementsByClassName("box")[0];
firstBox.style.top = "120px";
firstBox.style.left = "420px";