2015-09-25 11 views
7

Sto utilizzando jVectorMap Plugin per aggiungere una mappa al sito web. Ecco una mappa in cui ho aggiunto marcatori al caricamento della pagina. C'è un modo per farlo in modo dinamico? Devo aggiungerli al clic del mouse. Io uso jVectorMap PluginjVectorMap - Come aggiungere un indicatore dinamicamente

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 
      }, {}), 

     }] 
    } 
    }); 
    }); 

risposta

9

inizializzare la mappa con marcatori e valori vuoti:

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

Basta solo far notare che è anche possibile impostare i marcatori ei valori a parte, dichiarare due matrici:

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

quindi, ovunque sia necessario il gestore di clic, chiamare una funzione come questa:

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

Risultato finale:

enter image description here

+1

funziona come un fascino !! – Jude