jVectorMap - मार्कर गतिशील रूप से

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

अंतिम परिणाम: