Рисование пользовательских маркеров на jVectorMap

Я новичок в qQuery и не очень много сделал в javascript.

У меня есть небольшая карта jVectorMap с примерно 10 странами, и я хочу нарисовать небольшую круговую диаграмму поверх каждой страны.

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

Я рад просто рисовать прямо поверх jVectorMap с помощью плагина SVG, но я не могу заставить это работать.

Например. используя плагин "jQuery SVG", я попытался нарисовать круг поверх карты. Вот код:

<html>
<head>
  <link rel="stylesheet" href="jquery-jvectormap-1.1.1.css" type="text/css" media="screen"/>
  <link rel="stylesheet" href="jquery.svg.css" type="text/css" media="screen"/>
  <script src="jquery-1.8.0.min.js"></script>
  <script src="jquery-jvectormap-1.1.1.min.js"></script>
  <script src="jquery-jvectormap-north-west-europe.js"></script>
  <script src="jquery.svg.min.js"></script>
  <script>
    function drawCircle(svg) { 
      svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', strokeWidth: 3}); 
    }
  </script>
</head>
<body>
  <div id="europe-map" style="width: 400px; height: 400px"></div>
  <script>
    $(function(){
      $('#europe-map').vectorMap({
        map: 'north-west-europe',
        focusOn: {
        x: 0.3,
        y: 0.4,
        scale: 1.25
    },
      });
    });

    $('#europe-map').svg({onLoad: drawCircle});
  </script>
</body>
</html>

И вот результат:

Что отображается в браузере (Firefox 17)

По сути, для «холста» jQuery SVG создается дубликат div, а карта мира сдвигается вниз. Можно ли ссылаться на пространство рисования SVG, используемое jVectorMap для рисования?

Возможно, есть лучший способ сделать это, используя пользовательские маркеры или что-то в этом роде?

Большое спасибо, и извините, если это глупый вопрос.


svg jquery jvectormap
person Aonghus Shortt    schedule 07.01.2013    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Вам нужно использовать CSS, чтобы наложить два слоя друг на друга. Создайте следующий HTML-код:

<div id="mapContainer" style="position:relative">
    <div id="europe-map" style="position:absolute;top:0px;left:0px"></div>
    <div id="europe-map-overlay" style="position:absolute;top:0px;left:0px"></div>
</div>

Теперь вместо применения

$('#europe-map').svg({onLoad: drawCircle});

использовать

$('#europe-map-overlay').svg({onLoad: drawCircle});

вместо.

Это поместит круг поверх карты. Если вы хотите поместить круг в определенные координаты широты-долготы, используйте метод Jvectormap latLngToPoint() для создания покрытия.

person russellmania    schedule 09.10.2013

arrow_upward
2
arrow_downward

если вы не хотите маркер svg, используйте новый слой (div поверх слоя svg на карте)

Получить ссылку на карту

map = $("#world-map-gdp").vectorMap('get', 'mapObject');

и используйте функцию map.latLngToPoint(), чтобы найти точку в новом слое.

var newMarkerP = map.latLngToPoint(lat,lng);
$('#marker1').css('top',newMarkerP.x);
$('#marker1').css('top',newMarkerP.y);

Вы можете переместить маркеры, если сделаете масштабирование или перетаскивание, используйте ту же функцию и примените css слева и css сверху.

Может быть, вы можете поиграть с верхней и левой частью новых маркеров, но это простое решение.

person Blas Ruiz    schedule 12.03.2013
comment
Спасибо, я попробую это, и я посмотрю, как я получаю - person Aonghus Shortt; 12.03.2013

arrow_upward
0
arrow_downward

Вы можете использовать JVectorMap API, метод рисования — addCircle.

person MIGUEL ANGEL    schedule 15.02.2013
comment
Я хочу добавить круговые диаграммы, поэтому мне нужно больше функциональности, чем addCircle. Спасибо хоть - person Aonghus Shortt; 12.03.2013