Блог

Я работаю с библиотекой веб-картографирования LeafletJS, где я хочу, чтобы мой идентификатор точки / текст отображался по центру значков маркера.

Это то, что я хотел, чтобы мой текст указывал на значки маркеров следующим образом:-

Я пытался использовать divIcon, но он полностью переопределяет маркер, оставляя только текст.

 <div id="mapid" style="width: 100%; height: 600px;"></div>


<script>
    // Create the map obj...
    var mymap = L.map('mapid', {minZoom: 2, maxZoom: 20})
                 .setView([0, 0], 2);

    // Google Street Map - Set basemap...
    L.tileLayer('http://{s}.google.com/vt/lyrs=mamp;x={x}amp;y={y}amp;z={z}',{
        // minZoom: 0,
        maxZoom: 18,
        subdomains:['mt0','mt1','mt2','mt3']
    }).addTo(mymap);


    // Points data...
    var point_data = [ ['A', -0.0967, 51.5177],
                        ['B', -73.9979, 40.7240],
                        ['C', 2.2342, 53.4664],
                        ['D', 115.8580, -31.9561],
                        ['E', 174.7271, -36.8672]
                     ]

    // ------------------------------

    for (let i = 0; i < point_data.length; i  ) {

        // Making a divIcon...
        var div_icon = new L.divIcon({
                className: 'my-div-icon',
                html: `<b>${point_data[i][0]}</b>`
        });


        // Creat markers...
        marker = new L.marker([point_data[i][2], point_data[i][1]], {icon: div_icon}).addTo(mymap);

        // Bind Tooltip to marker...
        marker.bindTooltip(`<b>${point_data[i][0]}</b>`, 
                {
                    permanent: false, 
                    direction: 'right',
                })
    }

</script>