带有悬停 innerHTML 的标记

Question

我正在使用 Leaflet js 创建地图数据可视化。我运行遇到了一个（可能很容易解决的）问题。但我想不通。

我有一个 div，ID 是 "zipcode"

<div id="zipcode></div>

我正在尝试在悬停在地图上绘制的特定标记上时更改此 div 的文本内容。我试过这样的事情：

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

变量 rows[i]['postcode'] 是我用 d3 加载的 CSV 中的一个值。这看起来像：

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

希望对您有所帮助！

带有悬停 innerHTML 的标记

Markers with on hover innerHTML

csv

d3.js

leaflet

latitude-longitude

marker