logo标签列表

在jVectorMap上绘制自定义标记

jquerysvgjvectormap
4
我刚接触jQuery，对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，导致世界地图下移。能否引用jVectorMap使用的SVG绘图空间来绘制内容？
也许可以使用自定义标记或类似方式更好地完成此操作？
非常感谢，如果这是个愚蠢的问题，请谅解。
3个回答
3

您需要使用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-container').append(circle);

如果您想将圆放置在特定的纬度-经度坐标上，请使用Jvectormap latLngToPoint() 方法进行转换。

2

如果你不想使用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 left和css top。也许你可以玩一下新标记的顶部和左侧，但这是一个简单的解决方案。
谢谢，我会尝试一下并看看效果如何。 - Aonghus Shortt
0

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

我想添加饼图，所以我需要比addCircle更多的功能。谢谢。 - Aonghus Shortt
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接