0

Работаю с картой leafletjs и в коде javascript использую ссылки на 2 иконки. И если файлы иконок лежат вместе с тестовым html файлом все работает, но когда ложу все это дело в реальный проект иконки не отображаются, пробовал по разному прописывать пути, но к сожалению результатов не добился: так пути прописаны в тестовом рабочем файле:

iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png'

так пути прописаны в реальном файле проекта

iconUrl: '/static/img/map-icons/leaf-green.png',
shadowUrl: '/static/img/map-icons/leaf-shadow.png'

Путь к файлам лежит по адресу resources/static/img/map-icons

Сам тестовый файл проекта:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
<head>

    <title>Quick Start - Leaflet</title>
    <script src="/static/js/map_script.js" th:src="@{/static/js/map_script.js}"></script>

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
          integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
          crossorigin=""/>

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
            integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
            crossorigin=""></script>


</head>
<body>
<div class="navbar-form navbar-right">


    <h2>Map</h2>
    <div id="mapid" style=" height: 480px;"></div>


    <script>

        var mymap = L.map('mapid').setView([50.440989, 30.489694], 8);

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox.streets',
            accessToken: 'your.mapbox.access.token'
        }).addTo(mymap);

        var greenIcon = L.icon({
            iconUrl: 'leaf-green.png',
            shadowUrl: 'leaf-shadow.png',

            iconSize:     [38, 95], // size of the icon
            shadowSize:   [50, 64], // size of the shadow
            iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
            shadowAnchor: [4, 62],  // the same for the shadow
            popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
        });

        L.marker([50.440989, 30.489694],{icon: greenIcon}).addTo(mymap)
            .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

        L.circle([50.518544, 30.234004], 1000, {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5
        }).addTo(mymap).bindPopup("I am a circle.");

        L.polygon([
            [48.512111, 32.260717],
            [50.069991, 31.453183],
            [49.234111, 28.468438]
        ]).addTo(mymap).bindPopup("I am a polygon.");


        var popup = L.popup();

        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(mymap);
        }

        mymap.on('click', onMapClick);

    </script>

</div>
</body>
</html>

1
  • какой у Вас сервер и где на сервере иконки лежат относительно html? 20 мар 2019 в 17:28

1 ответ 1

1

/ - корень сайта

../ - родительский каталог

без слеша - текущий каталог.

Соответственно, чтобы ссылаться на какой-то конкретный файл из любого каталога, нужно писать /folder/subfolder/filename.ext

Другое дело, если к примеру, сайт находится не в корневом каталоге, тогда уже надо дописывать имя каталога сайта. Для более точной диагностики можно просто смотреть исходный код html, чтобы определить какой полный путь создается в том или ином случае.

1
  • Либо невнимательность, либо глюки в редакторе, переписал заново пути к файлу - все заработало, относительные пути моя беда (((. За ответ и за внимание к вопросу спасибо, ходябы не крутил с путями, по правильному пути заново пересмотрел ошибки. 21 мар 2019 в 7:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.