如何使用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。爲了添加標記，我使用了一個小小的JavaScript和一些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>

現在，你只需要你點添加到陣列和調整座標。正如你所看到的，我在y上添加了85px到x和-8px。我必須這樣做才能確定圖像上的偏移量和我自己的25x25格。此外，圖像和地圖座標之間存在偏移。

最後，我不是來自美國，但我認爲你在地圖上換了科羅拉多和新墨西哥州。我修正了這個片段。