jVectorMap - Cách thêm điểm đánh dấu động

Question

Tôi đang sử dụng jVectorMap Plugin để thêm bản đồ vào trang web. Đây là bản đồ mà tôi đã thêm điểm đánh dấu khi tải trang. Có cách nào để tự động làm điều đó không? Tôi cần thêm chúng khi nhấp chuột. Tôi sử dụng jVectorMap Plugin

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

Khởi tạo bản đồ với các dấu hiệu và các giá trị rỗng:

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

Chỉ cần duy nhất để chỉ ra rằng bạn cũng có thể đặt dấu và giá trị riêng, tuyên bố hai mảng:

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

khi đó, bất cứ nơi nào bạn cần trình xử lý nhấp chuột, hãy gọi một chức năng như sau:

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

kết quả cuối cùng: