javascript - 如何使用 html 和 jquery 在 MAP 标签上放置标记？

Question

我正在尝试创建映射图像。我完成了设置坐标等。

查找图像:

现在我需要在上面的几个区域放置一个标记。

示例所需图像:

我怎样才能做到这一点。

map 代码:

<img src="/images/mapimage.jpg" alt="States Map" usemap="#Map">
<map name="Map" id="Map">
    <area coords="46,378,216,408,219,534,46,529" shape="poly" href="#" title="Alaska" alt="">
    <area coords="247,456,368,487,354,535,246,529" shape="poly" href="#" title="Hawai" alt="">
    <area coords="91,2,174,25,163,79,72,56" shape="poly" href="#" title="Washington" alt="">
    <area coords="178,27,341,51,333,127,209,110" shape="poly" href="#" title="Montana" alt="">
    <area coords="176,25,209,115,239,116,227,171,151,155,148,152" shape="poly" href="#" title="Idaho" alt="">
    <area coords="241,116,335,126,330,206,227,193" shape="poly" href="#" title="Wyoming" alt="">
    <area alt="" title="Oregon" href="#" shape="poly" coords="72,58,162,81,144,156,47,129">
    <area coords="44,130,100,148,89,205,150,295,141,346,103,341,89,304,60,290,38,188" shape="poly" href="#" title="California" alt="">
    <area coords="104,147,187,167,170,262,151,293,91,201" shape="poly" href="#" title="Nevada" alt="">
    <area coords="190,166,228,175,225,193,255,200,244,275,172,262" shape="poly" href="#" title="Utah" alt="">
    <area coords="171,266,242,278,229,389,198,382,147,348,152,302" shape="poly" href="#" title="Arizona" alt="">
    <area coords="248,277,352,289,345,384,276,383,231,386" shape="poly" href="#" title="Colorado" alt="">
    <area coords="258,199,359,209,353,280,247,273" shape="poly" href="#" title="New Mexico" alt="">
    <area alt="" title="Nebraska" href="#" shape="poly" coords="335,168,443,175,457,232,362,229,358,207,334,207">
    <area alt="" title="South Dakota" href="#" shape="poly" coords="339,109,442,113,441,175,333,165">
    <area alt="" title="North Dakota" href="#" shape="poly" coords="345,50,432,56,441,110,339,106">
    <area alt="" title="Texas" href="#" shape="poly" coords="354,302,347,389,280,383,325,446,346,430,393,495,428,505,427,469,485,435,479,359,384,340,386,304">
    <area alt="" title="Oklahoma" href="#" shape="poly" coords="357,285,470,292,474,356,430,356,387,337,388,303,353,300">
    <area alt="" title="Kansas" href="#" shape="poly" coords="360,230,458,234,471,250,471,289,353,282">
    <area alt="" title="Minnesota" href="#" shape="poly" coords="436,55,472,59,531,71,501,93,494,131,516,159,442,158">
    <area alt="" title="Missouri" href="#" shape="poly" coords="455,222,519,221,557,285,553,298,475,299,474,250">
    <area alt="" title="Arkansas" href="#" shape="poly" coords="473,300,551,298,530,366,484,368,482,358,476,358">
    <area alt="" title="Louisiana" href="#" shape="poly" coords="487,434,520,435,540,443,564,442,552,406,525,406,532,387,528,369,482,370"> 
</map>

Answer 1

您可以在 map 上添加一个带有透明 png 的绝对元素。为了方便起见，我添加了一个 ID 为 container 的包装器 div。为了添加标记，我使用了一些 javascript 和一些 CSS。

var points = [{x:258, y:199}, 
					{x:359, y:209}, 
					{x:345, y:384}, 
					{x:276, y:383},
					{x:231, y:386}];
function drawPoint(point){   
        div = $("<div />")
            div.attr("class", 'cityMarker')
            div.css("top", point.y-8)
            div.css("left", point.x+85)
            $("#container").append(div)
}
for (var i = 0, len = points.length; i < len; i++) {
  drawPoint(points[i]);
}

#container {
  position: relative;
}
.cityMarker {
    height: 25px;
    width: 25px;
    background: url("http://www.myiconfinder.com/uploads/iconsets/256-256-f900504cdc9f243b1c6852985c35a7f7.png");
    position: absolute;
    background-repeat:no-repeat;
    background-size: cover;
    top: 2px;
    left: 91px;
    opacity: 1.0;
    -moz-opacity: 1.0;
    -webkit-opacity: 1.0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<img id="imgMap" src="http://image.prntscr.com/image/918feebe981d45adbee07710e04c4ef5.png" alt="States Map" usemap="#Map">
   <map name="Map" id="Map">
<area coords="46,378,216,408,219,534,46,529" shape="poly" href="#" title="Alaska" alt="">
<area coords="247,456,368,487,354,535,246,529" shape="poly" href="#" title="Hawai" alt="">
<area coords="91,2,174,25,163,79,72,56" shape="poly" href="#" title="Washington" alt="">
<area coords="178,27,341,51,333,127,209,110" shape="poly" href="#" title="Montana" alt="">
<area coords="176,25,209,115,239,116,227,171,151,155,148,152" shape="poly" href="#" title="Idaho" alt="">
<area coords="241,116,335,126,330,206,227,193" shape="poly" href="#" title="Wyoming" alt="">
<area alt="" title="Oregon" href="#" shape="poly" coords="72,58,162,81,144,156,47,129">
<area coords="44,130,100,148,89,205,150,295,141,346,103,341,89,304,60,290,38,188" shape="poly" href="#" title="California" alt="">
<area coords="104,147,187,167,170,262,151,293,91,201" shape="poly" href="#" title="Nevada" alt="">
<area coords="190,166,228,175,225,193,255,200,244,275,172,262" shape="poly" href="#" title="Utah" alt="">
<area coords="171,266,242,278,229,389,198,382,147,348,152,302" shape="poly" href="#" title="Arizona" alt="">
<area coords="248,277,352,289,345,384,276,383,231,386" shape="poly" href="#" title="New Mexico" alt="">
<area coords="258,199,359,209,353,280,247,273" shape="poly" href="#" title="Colorado" alt="">
<area alt="" title="Nebraska" href="#" shape="poly" coords="335,168,443,175,457,232,362,229,358,207,334,207">
<area alt="" title="South Dakota" href="#" shape="poly" coords="339,109,442,113,441,175,333,165">
<area alt="" title="North Dakota" href="#" shape="poly" coords="345,50,432,56,441,110,339,106">
<area alt="" title="Texas" href="#" shape="poly" coords="354,302,347,389,280,383,325,446,346,430,393,495,428,505,427,469,485,435,479,359,384,340,386,304">
<area alt="" title="Oklahoma" href="#" shape="poly" coords="357,285,470,292,474,356,430,356,387,337,388,303,353,300">
<area alt="" title="Kansas" href="#" shape="poly" coords="360,230,458,234,471,250,471,289,353,282">
<area alt="" title="Minnesota" href="#" shape="poly" coords="436,55,472,59,531,71,501,93,494,131,516,159,442,158">
<area alt="" title="Missouri" href="#" shape="poly" coords="455,222,519,221,557,285,553,298,475,299,474,250">
<area alt="" title="Arkansas" href="#" shape="poly" coords="473,300,551,298,530,366,484,368,482,358,476,358">
<area alt="" title="Louisiana" href="#" shape="poly" coords="487,434,520,435,540,443,564,442,552,406,525,406,532,387,528,369,482,370"> 
</map>
</div>

现在您只需要将点添加到数组并调整坐标即可。如您所见，我在 x 上添加了 85px，在 y 上添加了 -8px。我必须这样做才能修复图像和我自己的 25x25 div 的偏移量。此外，图像和 map 坐标之间存在偏移。

最后，我不是来自美国，但我认为您在 map 上调换了科罗拉多州和新墨西哥州。我修复了这个片段。