Добавление страницы ветки к всплывающему маркеру в листовке вызывает синтаксическую ошибку
Я использую leafletjs для рендеринга карты в приложении symfony. Моя проблема заключается в том, что когда я включаю страницу ветки как всплывающее окно в маркер карты, карта исчезает.
Я попытался добавить один элемент ({{ dreq.dreq_identifier }}) в свою ветку, и он отлично работает! проблема в том, что я добавляю несколько строк.
Вот мой код
<div id = "map" style = "height: 600px;"></div>
{% block javascripts %}
{{ parent() }}
<script>
$(window).on('load', '', function (e) {
if (document.getElementById('map')) {
let map;
//set up the Leaflet.js map
map = L.map('map', { center: [{{ data[0]['dreq_startLatitude'] }}, {{ data[0]['dreq_startLongitude'] }}], zoom: 13 });
let sitesGroup = L.layerGroup();
let customIcon = {
iconUrl:"https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png",
{#iconUrl:"{{ asset('assets/css/images/marker-icon.png') }}",#}
iconSize:[20,30]
};
let myIcon = L.icon(customIcon);
let iconOptions = {
icon:myIcon
};
// tiles etc
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'kalvo'
}
).addTo(map);
{% for element in data %}
var marker = new L.Marker([{{ element.dreq_startLatitude }}, {{ element.dreq_startLongitude }}], iconOptions).addTo(map);
var popup = L.popup()
// .setContent(""<img alt = "orange" align = "bottom" width = "24px" height = "24px" src = "/assets/img/orange.gif"/>");
.setContent("{% include 'dreq/maps/_popover_carto_dreqs.html.twig'
with {'dreq': element} %}");
marker.bindPopup(popup);
{% endfor %}
}
});
</script>
{% endblock javascripts %}
И в dreq/maps/_popover_carto_dreqs.html.twig я добавил этот код:
{{ operator(dreq.operator) }} channel: <b>{{ dreq.channelId }}</b> - file: <b>{{ dreq.fileName }}</b> - id: <b>{{ dreq.dreq_identifier }}</b>
- protocol: <b>{{getProtocolsLabel(dreq.dreq_protocol)}}</b> - direction: <b>{{dreq.direction}}</b>file name: <b>{{ dreq.dreq_fileName }}</b> - file size: <b>{{ dreq.dreq_fileSize | formatSize }}</b>status: <b>{{ dreq.dreqStatus }}</b> - packet: <b>{{ dreq.dreqPacketTechnoLabels }}
Когда я нажимаю F12, у меня возникает такая проблема:
Uncaught SyntaxError: недопустимый или неожиданный токен
Что я сделал не так?
@JuanCastillo показывает Uncaught SyntaxError: недопустимый или неожиданный токен. Я добавлю содержимое ошибки в свой пост.
можете ли вы попробовать использовать литерал шаблона? Я имею в виду установку значений в переменных, а затем добавление их в метод, но как литерал шаблона
.setContent("привет мир"); работает, но .setContent («привет (+ кнопка ввода) мир»); не работает
Я предполагаю, что проблема связана с линией возврата, javascript считает ее незавершенной строкой. есть идеи, как преобразовать его в строку? Я думаю, что это, вероятно, работает.
Я говорю что-то вроде: let popupContent = "{% include 'dreq/maps/_popover_carto_dreqs.html.twig' with {'dreq': element} %}"; а затем popup.setContent(popupContent); , кроме того, было бы лучше, если бы вы могли видеть значение "popupContent" перед (console.info( popupContent )) для проверки правильности
Давайте продолжим обсуждение в чате.
Вам нужно удалить все \r и \n, если вы хотите передать это в JS.
есть ли способ сделать это, даже если я использую операторы ветки, такие как if/else?
Назначьте включение переменной, затем замените символы новой строки в переменных, передавая их в JS.
Я сделал это следующим образом: {% set content %}{% include 'maps/_popover_carto_dreqs.html.twig' with {'dreq': element} %} {% endset %} var popupContent = "{{ content }}"; вар обр = popupContent.split("\n"); console.info(обр); Результат: «Uncaught SyntaxError: недопустимый или неожиданный токен». И красная линия на значении popupContent.
Вам нужно удалить символы новой строки, прежде чем передавать их в JS. Многострочное назначение — это не то, что нужно для JS.
@DarkBee, моя проблема в том, что у меня много операторов if else, и иметь только одну строку во всплывающем окне ветки не очень чисто. Я думаю, лучший способ - внедрить мою ветку со скрытым div в основную ветку и добавить ее html в мое всплывающее окно в javascript.
Ответы 1
Попробовав несколько решений, я думаю, что лучшее до сих пор (даже если оно не чистое) - это внедрить всплывающее окно ветки в элемент div и добавить его html во всплывающее окно.
<div id = "map" style = "height: 600px;"></div>
{% for element in data %}
<div id = "{{ element.identifiant }}" hidden>
{% if type == 'dreq' %}
{% include 'maps/_popover_carto_dreqs.html.twig' with {'dreq': element} %}
</div>
{% endfor %}
Дж:
{% for element in data %}
var marker = new L.Marker([{{ element['latitude'] }}, {{ element['longitude'] }}], iconOptions).addTo(map);
var popup = L.popup().setContent($("#{{ element.identifiant }}").html());
marker.bindPopup(popup, {maxWidth: 600});
{% endfor %}
Показывает ли это какую-либо ошибку? Код кажется правильным.