Как добавить маркер в jVectorMap?

Question

Я новичок в jVectorMap. У меня уже есть карта google по ссылке: http://codepen.io/anon/pen/RPjJYb. Я пытаюсь добавить маркеры на эту карту. Я пробовал следующий код, но не может добавить маркер на карте:

$('#vmap').vectorMap({ 
    map: 'usa_en', 
    backgroundColor: null, 
    color: '#D2D3D4', //#F58025 
    hoverColor: '#754200', 
    selectedColor: '#F58025', 
    borderColor: '#FFFFFF', 
    enableZoom: false, 
    showTooltip: false, 
    regionsSelectable: true, 

    markersSelectable: true, 
    markerStyle: { 
     initial: { 
      fill: 'grey', 
      stroke: '#505050', 
       "fill-opacity": 1, 
       "stroke-width": 1, 
       "stroke-opacity": 1, 
      r: 5 
     }, 
     hover: { 
      stroke: 'black', 
      "stroke-width": 2 
     }, 
     selected: { 
      fill: 'blue' 
     }, 
     selectedHover: { 
     } 
    }, 
    markers: [ 
     {latLng: [41.8781136,-87.6297982], name: "My marker name",style: {fill: 'yellow'}}, 
    ], 
    onRegionClick: function(element, code) 
    { 
    alert(code); 
    } 

}); 

Пожалуйста, помогите мне. Заранее спасибо.

Answer 1

Вы не используете jVectormap, но jqvmap. Я не думаю, что он реализует маркеры.

Вы можете переключиться на jVectorMap, это немного разные, но у него есть маркеры, такие как: http://jvectormap.com/examples/markers-world/

Простой демо: http://jsfiddle.net/IrvinDominin/96o28qnh/

Answer 2

, как @Irvin Dominin сказал jqvmap не реализует маркеры так попытайтесь использовать jVectormap они во многом похожи ,

$(document).ready(function(){ 
 
\t $('#vmap').vectorMap({ 
 
\t  map: 'us_aea_en', 
 
\t  backgroundColor: '#00ff11', 
 
\t  color: '#D2D3D4', //#F58025 
 
\t  hoverColor: '#754200', 
 
\t  selectedColor: '#F58025', 
 
\t  borderColor: '#FFFFFF', 
 
\t  enableZoom: false, 
 
\t  showTooltip: false, 
 
\t  regionsSelectable: true, 
 

 
\t  markersSelectable: true, 
 
\t  hoverOpacity: 0.7, 
 
\t  markersSelectable: true, 
 
\t  markerStyle: { 
 
\t   initial: { 
 
\t    fill: 'grey', 
 
\t    stroke: '#505050', 
 
\t     "fill-opacity": 1, 
 
\t     "stroke-width": 1, 
 
\t     "stroke-opacity": 1, 
 
\t    r: 5 
 
\t   }, 
 
\t   hover: { 
 
\t    stroke: 'black', 
 
\t    "stroke-width": 2 
 
\t   }, 
 
\t   selected: { 
 
\t    fill: 'blue' 
 
\t   }, 
 
\t   selectedHover: { 
 
\t   } 
 
\t  }, 
 
\t  markers: [ 
 
\t    {latLng: [41.8781136,-87.6297982], name: "My marker name",style: {fill: 'yellow'}}, 
 
\t   ], 
 
    onRegionClick: function(element, code) 
 
    { 
 
    alert(code); 
 
    } 
 

 
\t }); 
 
    
 
});

.jvectormap-label { 
 
    position: absolute; 
 
    display: none; 
 
    border: solid 1px #CDCDCD; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; 
 
    background: #292929; 
 
    color: white; 
 
    font-family: sans-serif, Verdana; 
 
    font-size: smaller; 
 
    padding: 3px; 
 
} 
 
.jvectormap-zoomin, .jvectormap-zoomout { 
 
    position: absolute; 
 
    left: 10px; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; 
 
    background: #292929; 
 
    padding: 3px; 
 
    color: white; 
 
    width: 10px; 
 
    height: 10px; 
 
    cursor: pointer; 
 
    line-height: 10px; 
 
    text-align: center; 
 
} 
 

 
.jvectormap-zoomin { 
 
top: 10px; 
 
} 
 
.jvectormap-zoomout { 
 
top: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://demo.omnigon.com/christian_bovine/showtime/js/jquery-jvectormap-1.1.1.min.js"></script> 
 
<script src="http://demo.omnigon.com/christian_bovine/showtime/js/jquery.jvectormap-us.js"></script> 
 

 
<div id="vmap" style="width: 600px; height: 600px;"></div>