Django 1.11: Javascript dynamique pour charger les marqueurs Google Map

Question

J'ai besoin d'insérer dynamiquement des données de marqueurs (nom, latitude, long) dans javascript, maps.js.

Dans mes maps.js, j'ai actuellement:

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>'],]; 

Et je dois être en mesure de charger cette dynamique en utilisant une boucle par exemple

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

Actuellement, je dispose d'un fichier statique maps.js, que je charge à l'aide:

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

Je ne peux pas insérer les balises là, parce qu'il est appelée de façon statique. Cependant, depuis maps.js est static, je ne peux pas charger des balises telles que {{ listing.location }} , {{ listing.lat }} , {{ listing.lng }} etc.

j'ai essayé 2 solutions (et celle décrite dans les commentaires).

1) J'ai essayé de charger le petit

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

mais cela ne fonctionne pas, je pense que locationData est une fonction, qui est également définie dans maps.js.

Je pourrais éventuellement inclure la totalité de maps.js dans template.html, mais il s'agit de 230 lignes de code.

2) J'ai essayé d'ajouter maps.js à mon dossier users app, comme si:

users/templates/users/maps.js 

Et à l'intérieur que je js chargé des balises de modèle définis ci-dessus. Dans mon views.py j'ai fait:

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> 

Cependant, j'obtiens l'erreur que le fichier n'a pas pu être trouvé.

Answer 1

This pourrait vous aider. quand vous mettez en contexte une certaine structure et le rendre dans le modèle avec filtre « sécurité »

Answer 2

Chargez votre fichier statique de la même manière: -

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

Pour passer des valeurs telles que {{ model.location }} , {{ model.lat }} , {{ model.lng }} à votre fichier js, les enregistrer en tant que variable globale dans script balise dans votre page HTML,

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

et les référer à maps.js par locationlat et lng.

Plus loin passer un tableau de données que vous pouvez le faire un peu comme ça,

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

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

       {% endfor %} 
      ]; 

Hope this helps :-)