Drawing custom markers on a jVectorMap

问题

I'm new to qQuery and have not done a whole lot in javascript.

I've a small jVectorMap with about 10 countries on it and I want to draw a small pie chart on top of each country.

I see that you can create markers, but I can't see how you would assign custom markers to a country.

I am happy just to draw directly on top of the jVectorMap using a SVG plugin, but I can't seem to get that to work.

E.g. using the "jQuery SVG" plugin, I've tried to draw a circle on top of the map. Here's the code:

<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>

And here's the result:

Effectively, a duplicate div is created for the jQuery SVG "canvas" and the world map is pushed down. Is it possible to reference the SVG drawing space used by jVectorMap to draw stuff on?

Perhaps there is a better way to do this using custom markers or something like that?

Many thanks, and apologies if this is a silly question.

回答1:

You need to use CSS to pull the two layers over the top of one another. Create the following 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>

Now, instead of applying

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

use

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

instead.

This will put the circle on top of the map. If you want to put the circle on specific latitude-longitude coordinates, use the Jvectormap latLngToPoint() method to make the covnersion.

回答2:

if you want not svg marker, use a new layer (div over the svg layer in the map)

Get reference to the map

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

and use the function map.latLngToPoint() to locate the point in the new layer.

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

You can relocate the markers if make zoom or drag, use the same function and apply css left, and css top.

May be you can play with the top and left of the new markers, but is a easy solution.

回答3:

You can use the JVectorMap API, the method to draw is addCircle.

来源：https://stackoverflow.com/questions/14201326/drawing-custom-markers-on-a-jvectormap

标签

jquery

svg

jvectormap