Question

我正在使用jVectorMap插件向网站添加地图。这是我在页面加载时添加标记的地图。有没有办法动态地做到这一点？我需要在鼠标点击时添加它们。我使用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
            }, {}),

        }]
    }
    });
    });

Answer 1

使用空标记和值初始化地图：

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);   
}

最终结果：

Answer 2

另一种方法是清空地图容器，然后使用标记重新渲染地图。渲染速度很快，并且页面内存得到很好的管理：

function load_map() {

   $("#us_map").empty();

   $("#us_map").vectorMap({
   map: "us_merc_en",
   normalizeFunction: "polynomial",
   hoverOpacity: .7,
   hoverColor: !1,
   regionStyle: {
    initial: {
     fill: "#e3eaef"
    }
   },
   markerStyle: {
    initial: {
     r: 9,
     fill: "#727cf5",
     "fill-opacity": .9,
     stroke: "#fff",
     "stroke-width": 7,
     "stroke-opacity": .4
    },
    hover: {
     stroke: "#fff",
     "fill-opacity": 1,
     "stroke-width": 1.5
    }
   },
   backgroundColor: "transparent",
   markers: [{
    latLng: [$('#latitude').val(), $('#longitude').val()],
    name: $('#address').val()
   }]
  })
}

jVectorMap - 如何动态添加标记

2 个答案: