html & jquery를 사용하여 MAP 태그에 마커를 배치하는 방법은 무엇입니까?

Question

매핑 된 이미지를 만들려고합니다. 나는 좌표 등

찾기 이미지를 설정하여 수행하고있다 : http://prntscr.com/d301ds

지금 내가이 여러 분야에 마커를 배치해야합니다.

예 필요한 이미지 : http://prntscr.com/d3063i.

어떻게해야합니까?

지도 코드 :

<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

당신은지도를 통해 투명 PNG와 절대 요소를 추가 할 수 있습니다. 쉽게 만들려면 div ID가 container 인 래퍼를 추가하십시오. 마커를 추가하려면 약간의 자바 스크립트와 CSS를 사용하고 있습니다.

var points = [{x:258, y:199}, 
 
\t \t \t \t \t {x:359, y:209}, 
 
\t \t \t \t \t {x:345, y:384}, 
 
\t \t \t \t \t {x:276, y:383}, 
 
\t \t \t \t \t {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의 오프셋을 수정해야했습니다. 또한 이미지와지도 좌표 사이에 오프셋이 있습니다.

마지막으로, 저는 미국 출신이 아니지만지도에서 콜로라도와 뉴 멕시코를 바꿨다고 생각합니다. 나는이 단편에 고정시켰다.