Менять закладку jvectormap на изображение

Я пробую менять закладки, которые приходят по умолчанию jvectormaps из-за изображения, которое было бы сориентировано в стране согласно вошедшим координатам.

Код карты - следующий:

 <div id="world-map-markers" style="height: 400px" ></div>

<script>
$(function(){
  $('#world-map-markers').vectorMap({
    map: 'world_mill',
    scaleColors: ['#C8EEFF', '#0071A4'],
    normalizeFunction: 'polynomial',
    hoverOpacity: 0.7,
    hoverColor: false,
    markerStyle: {
      initial: {
        fill: '#F8E23B',
        stroke: '#383f47'
      }
    },
    backgroundColor: '#383f47',
    markers: [
      {latLng: [41.90, 12.45], name: 'Vatican City'},
      {latLng: [43.73, 7.41], name: 'Monaco'},
      {latLng: [-0.52, 166.93], name: 'Nauru'},
      {latLng: [-8.51, 179.21], name: 'Tuvalu'},
      {latLng: [43.93, 12.46], name: 'San Marino'},
      {latLng: [47.14, 9.52], name: 'Liechtenstein'},
      {latLng: [7.11, 171.06], name: 'Marshall Islands'},
      {latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis'},
      {latLng: [3.2, 73.22], name: 'Maldives'},
      {latLng: [35.88, 14.5], name: 'Malta'},
      {latLng: [12.05, -61.75], name: 'Grenada'},
      {latLng: [13.16, -61.23], name: 'Saint Vincent and the Grenadines'},
      {latLng: [13.16, -59.55], name: 'Barbados'},
      {latLng: [17.11, -61.85], name: 'Antigua and Barbuda'},
      {latLng: [-4.61, 55.45], name: 'Seychelles'},
      {latLng: [7.35, 134.46], name: 'Palau'},
      {latLng: [42.5, 1.51], name: 'Andorra'},
      {latLng: [14.01, -60.98], name: 'Saint Lucia'},
      {latLng: [6.91, 158.18], name: 'Federated States of Micronesia'},
      {latLng: [1.3, 103.8], name: 'Singapore'},
      {latLng: [1.46, 173.03], name: 'Kiribati'},
      {latLng: [-21.13, -175.2], name: 'Tonga'},
      {latLng: [15.3, -61.38], name: 'Dominica'},
      {latLng: [-20.2, 57.5], name: 'Mauritius'},
      {latLng: [26.02, 50.55], name: 'Bahrain'},
      {latLng: [0.33, 6.73], name: 'São Tomé and Príncipe'}
    ]
  });
});
 </script>

Спасибо.

1
задан 13.01.2017, 00:07
0 ответов

Используй marker и площадь HTML, чтобы помечать площади, ты должен использовать инструмент, который тебе облегчало бы делать это, он советовал бы например этот тебе http://imagemap-generator.dariodomi.de/

я оставляю тебе пример: протестируй это помещая сверху click в Мексике

<img src="https://wiki.erepublik.com/images/thumb/d/d2/Map-Mexico.jpg/400px-Map-Mexico.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="Este es Mexico" href="google.com" shape="poly" coords="24,57,24,75,31,86,31,91,28,96,22,92,37,107,42,120,47,130,49,136,53,133,47,117" />
    <area alt="" title="Este es Mexico" href="http://es.stackoverflow.com/" shape="poly" coords="49,122,41,97,36,79,34,74,39,67,45,71,49,90,61,104,70,124,83,151,79,162,99,177,119,189,146,197,156,194,167,202,174,198,182,195,180,184,185,181,200,174,206,167,217,153,199,149,190,154,187,163,175,173,144,165,139,153,135,137,146,117,136,108,128,88,121,82,102,79,94,70,78,71,60,68,32,56,26,57" />
    [...]
</map>

Делая это более привлекательным, используя tooltip Доказательство помещая на стране Мексики мышь, если ты кликаешь ты direccionara в страницу.

$( function() {
    $( document ).tooltip();
  } );
label {
    display: inline-block;
    width: 5em;
  }
<meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Tooltip - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>



<img src="https://wiki.erepublik.com/images/thumb/d/d2/Map-Mexico.jpg/400px-Map-Mexico.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="Este es Mexico" href="google.com" shape="poly" coords="24,57,24,75,31,86,31,91,28,96,22,92,37,107,42,120,47,130,49,136,53,133,47,117" id="age" />
    <area alt="" title="Este es Mexico" href="http://es.stackoverflow.com/" shape="poly" coords="49,122,41,97,36,79,34,74,39,67,45,71,49,90,61,104,70,124,83,151,79,162,99,177,119,189,146,197,156,194,167,202,174,198,182,195,180,184,185,181,200,174,206,167,217,153,199,149,190,154,187,163,175,173,144,165,139,153,135,137,146,117,136,108,128,88,121,82,102,79,94,70,78,71,60,68,32,56,26,57" />
    [...]
</map>
2
ответ дан 03.12.2019, 17:41
  • 1
    Нет, в чем я нуждаюсь, состоит в том, чтобы менять закладки желтого цвета có я говорю из-за изображения для того, чтобы это изображение функционировало как закладка этого paí в. –  13.01.2017, 15:54

Теги

Похожие вопросы