jVectorMap - Jak dynamicznie dodawać marker

Question

Używam wtyczki jVectorMap do dodania mapy do strony. Oto mapa, na której dodałem znaczniki przy ładowaniu strony. Czy istnieje sposób, aby zrobić to dynamicznie? Muszę dodać je po kliknięciu myszą. Używam jVectorMap wtyczki

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

Inicjalizować mapę z pustych znaczników i wartościach:

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: [], 
      }] 
    } 
}); 

Wystarczy tylko zwrócić uwagę, że można także ustawić znaczniki i wartości osobno zadeklarować dwie tablice:

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

, a następnie, gdziekolwiek potrzebujesz obsługi kliknięcia, wywołaj funkcję podobną do tej:

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

Wynik końcowy: