Django 1.11:动态JavaScript加载Google Map标记

Question

我需要将标记数据（名称，纬度，长）动态插入javascript， 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 for for for for 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。

中定义

我可能会在template.html中包含整个maps.js，但这是230行代码。

2）我尝试将maps.js添加到我的users应用程序夹中，如：

users/templates/users/maps.js

在该JS内部我加载了上面定义的模板标签。从我的角度来看，我做到了：

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>

但是，我发现无法找到文件的错误。

Answer 1

以相同的方式加载静态文件： -

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

对于将{{ model.location }} , {{ model.lat }} , {{ model.lng }}（例如CC_10）传递给JS文件的值

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 %}
            ];

希望这会有所帮助： - ）

Answer 2

这可以帮助您。当您将某些结构放置在上下文中时，然后将其渲染在模板中使用"安全"过滤器