在 jVectorMap 上绘制自定义标记答案

【问题标题】：Drawing custom markers on a jVectorMap在 jVectorMap 上绘制自定义标记
【发布时间】：2013-10-09 12:42:36
【问题描述】：

我是 qQuery 的新手，在 javascript 方面没有做过很多工作。

我有一个小的 jVectorMap，上面有大约 10 个国家，我想在每个国家的顶部画一个小饼图。

我知道您可以创建标记，但我看不出您将如何将自定义标记分配给国家/地区。

我很高兴使用 SVG 插件直接在 jVectorMap 上绘图，但我似乎无法让它工作。

例如使用“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>

结果如下：

实际上，为 jQuery SVG“画布”创建了一个重复的 div，并向下推了世界地图。是否可以引用 jVectorMap 使用的 SVG 绘图空间来绘制内容？

也许有更好的方法来使用自定义标记或类似的东西？

非常感谢，如果这是一个愚蠢的问题，我们深表歉意。

【问题讨论】：

标签： jquery svg jvectormap

【解决方案1】：

您需要使用 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() 方法进行覆盖。

【讨论】：

【解决方案2】：

如果您不想使用 svg 标记，请使用新图层（地图中 svg 图层上方的 div）

获取地图参考

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 left 和 css top。

也许您可以使用新标记的顶部和左侧，但这是一个简单的解决方案。

【讨论】：

谢谢，我会试试看，看看效果如何

【解决方案3】：

可以使用JVectorMap API，绘制的方法是addCircle。

【讨论】：

我想添加饼图，所以我需要比 addCircle 更多的功能。不过谢谢