如何在 jVectorMap 中創建動畫標記
[英]How to create an animated marker in jVectorMap
問題描述
我想在 Jvector 地圖上創建一個動畫標記，我想使用這個具有不同顏色的 Bootstrap Growing Spinner 作為制造商，我該怎么做。
我的 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 嘗試了很多，但沒有奏效。
1 個解決方案
解決方案1
1 2020-02-13 13:18:55
多年來我一直想這樣做，但我從來沒有時間。
演示 #1：
$(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>', values = ["0"], locations = [{latLng: [35.45582, 139.68187], name: 'Diamond Princess'}]; function addAniMarkers(map, locations, values) { 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.series.markers[0].setValues(values); $(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: [], series: { markers: [{ attribute: 'fill', scale: { '0': '#ff0000' }, values: [], }] }, onViewportChange: function(event, scaleFactor) { repositionAniMarkers("#map"); } }); addAniMarkers("#map", locations, values); });
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/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/jvectormap@2.0.4/jquery-jvectormap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en.js"></script> </head> <body> <div id="map" style="width: 600px; height: 400px"></div> </body> </html>
解釋：
您需要獲取動畫 SVG 圖標並將內容克隆到與地圖標記相同的位置。 之后，您可以使用 jVectorMap填充選項作為標記。 就是這樣。
演示 #2：
$(document).ready(function() { var markerIcon = '<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="10" stroke="#000000" stroke-width="2"><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><circle cx="20" cy="20" fill="pointColor" stroke="#000000" stroke-width="1" r="6"/></svg>'; function imgFromSVG(svg, pointColor) { var newSVG = svg.replace(/pointColor/gi, pointColor); return 'data:image/svg+xml;charset=UTF-8,' + escape(newSVG); } $("#map").vectorMap({ map: "world_mill_en", backgroundColor: "aliceblue", zoomOnScroll: true, regionStyle: {initial: {fill: "lightgrey"}}, markerStyle: {initial: {fill: '#F8E23B', stroke: '#383f47'}}, markers: [{latLng: [35.45582, 139.68187], name: 'Diamond Princess'}], series: { markers: [{ attribute: 'image', scale: { '0': imgFromSVG(markerIcon, '#ff0000') }, values: ['0'], }] } }); });
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/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/jvectormap@2.0.4/jquery-jvectormap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en.js"></script> </head> <body> <div id="map" style="width: 600px; height: 400px"></div> </body> </html>
解釋：
您需要采用動畫 SVG 圖標並使用 jVectorMap圖像選項作為標記。 這樣，您可以根據您的比例值調整 svg 屬性。
順便說一句，感謝bjornd提供了偉大的 jVectorMap。
如何在jVectorMap中添加標記？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.