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

最終結果：