Маркеры с on hover innerHTML

Question

Я создаю карту datavisualisation с листом js. И я столкнулся с (возможно, легко решаемой) проблемой. Но я не могу понять.

У меня есть DIV с идентификатором, который является «почтовым индексом»

<div id="zipcode></div> 

И я пытаюсь изменить содержание текста этого Div на подвешенном конкретного маркеров, который был нанесен на карте. Я пытался что-то вроде этого:

marker.on('mouseover', function (e) { 
    this.openPopup(); 
    document.getElementById("zipcode").innerHTML = rows[i]['postcode']; 
});    

Переменная rows[i]['postcode'] является значение из CSV, который я загружаю в с d3. Это выглядит так:

d3.csv("data/data.csv", function(d) { 
    return { 
    client: d.Client, 
    postcode: d.Postcode, 
    plaats: d.Plaats, 
    totaal: d.Totaal, 
    budget: d.Budget, 
    besteed: d.Besteed, 
    percentage: d.Percentage, 
    latitude: d.Lat, 
    longitude: d.Long, 
    street: d.Street 
    }; 


    }, function(error, rows) { 

    for(i=0; i<rows.length; i++) { 
     var latitude = rows[i]['latitude']; 
     var longitude = rows[i]['longitude']; 
     var percentage = rows[i]['percentage']/100; 
     var street = rows[i]['street']; 


     var cssIcon = L.divIcon({ 
      // Specify a class name we can refer to in CSS. 
      className: 'css-icon', 
      // Set marker width and height 
      iconSize: [rows[i]['budget']/25+10, rows[i]['budget']/25+10] 
     }); 

     var marker = L.marker([latitude,longitude], {icon: cssIcon, opacity: percentage}).addTo(map); 
    } 
}); 

К сожалению, я не могу найти решение для этого. Пожалуйста, помогите мне!

Answer 1

Вы можете хранить данные, связанные с маркером, как это:

for(i=0; i<rows.length; i++) { 
     var latitude = rows[i]['latitude']; 
     var longitude = rows[i]['longitude']; 
     var percentage = rows[i]['percentage']/100; 
     var street = rows[i]['street']; 


     var cssIcon = L.divIcon({ 
      // Specify a class name we can refer to in CSS. 
      className: 'css-icon', 
      // Set marker width and height 
      iconSize: [rows[i]['budget']/25+10, rows[i]['budget']/25+10] 
     }); 

     var marker = L.marker([latitude,longitude], {icon: cssIcon, opacity: percentage}).addTo(map); 
     marker.myData = rows[i];//setting the data 
    } 

Тогда в стороне вашего мероприятие, вы должны быть в состоянии получить данные строки

marker.on('mouseover', function (e) { 
    this.openPopup(); 
    document.getElementById("zipcode").innerHTML = this.myData.postcode; 
}); 

Надеется, что это помогает!