jVectorMap 标记为图标

Question

Does anyone know how to add a Image as Marker in jVectorMap?

I read a lot of posts here in stackoverflow resolving the same question, but i couldn't make it.

My code is the next one:

 $(function(){ $('#map').vectorMap({ zoomOnScroll: false, scaleColors: ['#C8EEFF', '#0071A4'], hoverOpacity: 0.7, hoverColor: false, backgroundColor: '#6F644E', markers: [ {latLng: [40.4381311, -3.8196209], name: 'Spain'}, ], markerStyle: { initial: { image: 'http://jvectormap.com/img/icon-np-2.png', } }, }); });

 <link rel="stylesheet" href="resources/jquery-jvectormap/jquery-jvectormap-2.0.3.css" type="text/css" media="screen"/> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="resources/jquery-jvectormap/jquery-jvectormap-2.0.3.min.js"></script> <script src="resources/jquery-jvectormap/jquery-jvectormap-world-mill-en.js"></script> <div id="map" class="container-fluid cont-slider">

But when I try to run the code, this error came up everytime:

Also I want to add I readed this http://jvectormap.com/examples/marker-icons/ but It didn't work.

Answer 1

I've faced the same problem. Looks like jVectorMap doesn't support all features of JQuery v.3.xx I've tried all the older versions and found that 2.2.4 is working great. Newest Jquery version could properly work only with non-image markers