Question

我正在使用Leaflet js创建Map datavisualisation。我遇到了一个（可能很容易解决的）问题。但我无法弄明白。

我有一个ID为＆＃34; zipcode＆＃34;

的div

<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的标记

1 个答案: