Nano Hash - криптовалюты, майнинг, программирование

Django 1.11: динамический Javascript для загрузки маркеров Google Map

Мне нужно динамически вставлять данные маркеров (имя, широта, длина) в javascript, maps.js.

В моем maps.js у меня сейчас есть:

var locations = [
        [ locationData('listings1.html','images/listing-item-01.jpg',"listing name",'Address ', '4.5', '12'), 40.94401669296697, -74.16938781738281, 1, '<i class="im im-icon"></i>'],
        [ locationData('listings2.html','images/listing-item-02.jpg','Name2','Place', '5.0', '23'), 40.77055783505125, -74.26002502441406,          2, '<i class="im im-icon"></i>'],];

И мне нужно иметь возможность загружать это динамически, используя цикл for, например.

{% if listings %}
var locations = [
{% for listing in listings %}
[ locationData({{ listing.url}} , {{ listing.name }} , {{ listing.place }}) ],
{% endfor %}
]

В настоящее время у меня есть статический файл maps.js, который я загружаю, используя:

<script type="text/javascript" src="{% static 'scripts/maps.js' %}"></script>

Я не могу вставить туда теги, потому что он вызывается статически. Однако, поскольку maps.js равно static, я не могу загружать такие теги, как {{ listing.location }} , {{ listing.lat }} , {{ listing.lng }} и т. д.

Я попробовал 2 решения (и то, что описано в комментариях).

1) Я попытался загрузить небольшой

#template.html
<script>
var locations = 
// python code
</script>

но это не сработало, я думаю, потому что locationData — это функция, которая также определена в maps.js.

Я мог бы включить все maps.js в template.html, но это 230 строк кода.

2) Я попытался добавить maps.js в папку приложения users, например:

users/templates/users/maps.js

И внутри этого js я загрузил теги шаблона, определенные выше. В моих views.py я сделал:

def index(request):
    js_file = "users/templates/users/maps.js" 

    return render(request, "users/template.html", context={"js_file": js_file })

#template.html

<script src="{{js_file}}"></script>

Тем не менее, я получаю сообщение об ошибке, что файл не может быть найден.


Ответы:


1

Загрузите свой статический файл таким же образом: -

<script type="text/javascript" src="{% static 'scripts/maps.js' %}"></script>

Для передачи значений, таких как {{ model.location }} , {{ model.lat }} , {{ model.lng }}, в ваш файл js, сохраните их как глобальную переменную в теге script на вашей HTML-странице как,

var location = "{{ model.location }}";
var lat = "{{ model.lat }}";
var lng = "{{ model.lng }}";

И сослаться на них в maps.js по location lat и lng.

Далее, чтобы передать массив данных, вы можете сделать это примерно так:

 var locationsArray = [
                {% for location in locations %}

                    {
                        id: {{ location.pk }}, name: '{{ location.name|escapejs }}',
                        lat: '{{ location.lat }}',
                        lng: "{{ location.lng }}"
                    },

                {% endfor %}
            ];

Надеюсь это поможет :-)

20.09.2017
  • Я попытался сделать это, в шаблоне я определил местоположения переменных и просто скопировал код из maps.js, чтобы определить переменную вне maps.js. Затем я закомментировал местоположения переменных maps.js, но это не работает. 20.09.2017
  • Это решение должно работать, я решил свои проблемы только таким образом. Посмотрите мой этот ответ, stackoverflow.com/a/46302661/4834455, вы можете получить еще несколько подсказок из этого. 20.09.2017
  • Сделав это, я вижу, как это будет работать только для 1 записи. Но как бы вы включили цикл в это? Мне нужно, чтобы в файле maps.js было столько местоположений (маркеров), сколько записей возвращает моя модель. 21.09.2017

  • 2

    Это может вам помочь. когда вы помещаете в контекст некоторую структуру, а затем визуализируете ее в шаблоне с «безопасным» фильтром

    20.09.2017
    Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..