我想在Jvector地图上创建一个动画标记，我想使用这种Bootstrap生长微调器作为制造商，我该如何做。
我的Jvector地图代码：
jQuery.noConflict();
jQuery(function(){
var $ = jQuery;
$('#map').vectorMap({
map: 'world_mill_en',
panOnDrag: true,
focusOn: {
x: 0.5,
y: 0.5,
scale: 1,
animate: true
},
series: {
regions: [{
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
}]
},
markerStyle: {
initial: {
fill: '#F8E23B',
},
hover: {
stroke: '#4d53c9',
"stroke-width": 2,
cursor: 'pointer'
},
selected: {
fill: 'blue !importanr'
},
},
backgroundColor: '#13acbf',
markers: [
{latLng: [41.90, 12.45], name: 'Location: Vatican City'},
{latLng: [43.73, 7.41], name: ' Location: Monaco'},
{latLng: [44.73, 7.42], name: ' Location: Monaco', style:{fill:'#ff1100'}},
{latLng: [12.9716, 77.5946], name: 'Location: Bengaluru', style: {fill: '#258210'}},
]
});
})
我通过添加css尝试了很多，但是没有用。
我已经想做很多年了，但是我没有时间。
DEMO：
我拍了一个动画图标，然后将内容克隆到与地图标记相同的位置。就这样。
$(document).ready(function() {
var animatedIcon = '<svg width="40" height="40" viewbox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" fill="none" r="4" stroke="currentColor" stroke-width="3"><animate attributeName="stroke-width" from="3" to="0" dur="1.5s" begin="0s" repeatCount="indefinite"/> <animate attributeName="r" from="8" to="20" dur="1.5s" begin="0s" repeatCount="indefinite"/><animate attributeName="opacity" from="1" to="0" dur="1.5s" begin="0s" repeatCount="indefinite"/></circle></svg>',
locations = [{latLng: [35.45582, 139.68187], name: 'Diamond Princess'}];
function addAniMarkers(map, locations) {
var svg = $(animatedIcon)[0],
circle = svg.firstChild,
mapObj = $(map).vectorMap('get', 'mapObject'),
svgRoot = mapObj.canvas.node,
g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
mapObj.aniMarkers = [];
for(var i=0, l=locations.length; i<l; i++) {
var marker = locations[i],
clone = circle.cloneNode(true);
mapObj.addMarker(i, marker, []);
mapObj.aniMarkers.push(clone);
g.appendChild(clone);
}
svgRoot.appendChild(g);
$(mapObj.container).trigger("viewportChange");
}
function repositionAniMarkers(map) {
var mapObj = $(map).vectorMap('get', 'mapObject'),
markers = mapObj.markers,
aniMarkers = mapObj.aniMarkers;
for (var i in markers) {
var point = mapObj.getMarkerPosition(markers[i].config),
el = markers[i].element,
cx = el.shape.node.getAttribute("cx"),
cy = el.shape.node.getAttribute("cy"),
clone = aniMarkers[i];
clone.setAttribute("cx", cx);
clone.setAttribute("cy", cy);
}
}
$("#map").vectorMap({
map: "world_mill_en",
backgroundColor: "aliceblue",
zoomOnScroll: true,
regionStyle: {initial: {fill: "lightgrey"}},
markerStyle: {initial: {fill: '#F8E23B', stroke: '#383f47'}},
markers: [],
onViewportChange: function(event, scaleFactor) {
repositionAniMarkers("#map");
}
});
addAniMarkers("#map", locations);
});<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/jquery-jvectormap.min.css" type="text/css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery-jvectormap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>