gpt4 book ai didi

jquery - jVectorMap - 如何动态添加标记

转载 作者:行者123 更新时间:2023-12-03 22:26:17 25 4
gpt4 key购买 nike

我正在使用 jVectorMap 插件将 map 添加到网站。这是我在页面加载时添加标记的 map 。有没有办法动态地做到这一点?我需要通过鼠标单击添加它们。我使用 jVectorMap 插件

   var plants = [
{name: 'VAK', coords: [-25.274398, 133.775136], status: 'mrk'},
{name: 'MZFR', coords: [37.090240, -95.712891], status: 'mrk'},
{name: 'AVR', coords: [50.9030599, 6.4213693], status: 'mrk'}

];

$('#world-map-markers').vectorMap({
map: 'world_mill_en',
normalizeFunction: 'polynomial',
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}
},
backgroundColor: '#383f47',
markers: plants.map(function(h) {
return {
name: h.name,
latLng: h.coords
}
}),
series: {
markers: [{
attribute: 'image',
scale: {
'mrk': 'marker.png'
},
values: plants.reduce(function(p, c, i) {
p[i] = c.status;
return p
}, {}),

}]
}
});
});

最佳答案

使用空标记和值初始化 map :

mapObj = new jvm.Map({
container: $('#world-map-markers'),
map: 'world_mill_en',
normalizeFunction: 'polynomial',
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}
},
backgroundColor: '#383f47',
markers: [],
series: {
markers: [{
attribute: 'image',
scale: {
'mrk': 'marker.png'
},
values: [],
}]
}
});

只是想指出,您也可以单独设置标记和值,声明两个数组:

var mapMarkers = [];
var mapMarkersValues = [];

然后,无论您在哪里需要点击处理程序,都可以调用如下函数:

function addPlantsMarkers() {
var plants = [
{name: 'VAK', coords: [-25.274398, 133.775136], status: 'mrk'},
{name: 'MZFR', coords: [37.090240, -95.712891], status: 'mrk'},
{name: 'AVR', coords: [50.9030599, 6.4213693], status: 'mrk'}

];
mapMarkers.length = 0;
mapMarkersValues.length = 0;
for (var i = 0, l= plants.length; i < l; i++) {
mapMarkers.push({name: plants[i].name, latLng: plants[i].coords});
mapMarkersValues.push(plants[i].status);
}
mapObj.addMarkers(mapMarkers, []);
mapObj.series.markers[0].setValues(mapMarkersValues);
}

最终结果:

enter image description here

关于jquery - jVectorMap - 如何动态添加标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32788509/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com