Question

这个问题非常具体，但我认为它也可以帮助其他人。就像标题所暗示的那样，我正在尝试实现一个象形图，以表示一种有关传单地图上标记的等级。我已经进行了研究，互联网上的所有人都建议为此使用svg文件，并且有很多示例实现了这一目的。

Here是我目前拥有的（格式的道歉）。我要拥有的不是取值X/5，而是要有一个象形文字的恒星，对应于该值填充。

我在网上找到了以下example，几乎可以满足我的需求。我需要做的是根据标记的等级给5个星星上色。但是，此示例在div容器中定义了svg星级，而我想在标记弹出窗口中实现它。

如果可以将正确的星号保存在变量中，然后在弹出窗口中简单地调用该变量，则实现起来可能会更简单。

该评级对我来说是浮动的，可以直接访问。

我在下面的代码中添加了一个脚本标记，该标记定义了标记。

var markersEU = new L.MarkerClusterGroup({
    showCoverageOnHover: false,    
});
    for (var i = 0; i < universiteEU.length; i++) {
        var a = universiteEU[i];
        var title = a[0];
        var marker = L.marker(new L.LatLng(a[1], a[2]), { title: title });
        marker.bindPopup(title + '<br/>'+'Ranking:  '+a[3]+'/5'+'<br/>'+'Qualité de vie:  '+a[4]+'/5'+'<br/>'+'<a href=/exchange/universite/'+a[5]+'><p style="text-align:center;margin:0;padding:0;">Cliquez ici</p></a>'); //quand on clique (metter info plus url avec href accolade)
        markersEU.addLayer(marker);         
    }
    map.addLayer(markersEU);

理想情况下，我希望能够将其保留在我的html文件中，因为所有这些都只会显示在单个页面上，因此不需要填写我的css文件。

随时检查我在github repository中使用的代码。

将SVG象形图图表实施到传单标记弹出窗口中

0 个答案: