下面是我在main.html文件中的代码：
<body>
<h1>mappymappy</h1>
<div id='map'></div>
<script>
mapboxgl.accessToken = '{{ mapbox_access_token }}'
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-73.9911, 40.7051],
zoom: 9.5
})
</script>
{% for center in drop_in_centers %}
<script>
new mapboxgl.Marker({ "color": 'red' })
.setLngLat([{{ center.longitude }}, {{ center.latitude }}])
.setPopup(new mapboxgl.Popup({ offset: 25 })
.setHTML("<h2>Drop-in Center</h2><h3>{{center.center_name}}</h3>"))
.addTo(map)
</script>
{% endfor %}
我想把脚本移到一个单独的.js文件中。然而，为了做到这一点，我必须想办法进入
- 将值
mapbox_access_token和drop_in_centers发送到.js文件 - 并使这些值能够在.js文件中使用
我该怎么做？
+)mapbox_access_token和drop_in_centers都来自views.py文件。
选项1(在模板中定义变量，将它们传递给js
views.py:
def my_view_function(request):
# define variables:
map_box_token = 'the_token'
drop_in_centers = 'the_drop_ins'
# pack context:
context = {
'map_box_token' : map_box_token,
'drop_in_centers' : drop_in_centers,
}
return render(request, 'template.html', context)
template.html:
<body>
...
<script>
var map_box_token='{{map_box_token}}';
var drop_in_centers='{{drop_in_centers}}';
</script>
<!-- include script.js after vars are defined -->
<script src="{% static 'script.js' %}"></script>
</body>
script.js:
console.log(map_box_token) // ex: use as needed
console.log(drop_in_centers) // ex: use as needed
选项2(使用ajax从views.py 检索数据
views.py:
def my_view_function(request):
# define variables:
map_box_token = 'the_token'
drop_in_centers = 'the_drop_ins'
# pack context:
context = json.dumps({
'map_box_token' : map_box_token,
'drop_in_centers' : drop_in_centers,
})
return HttpResponse(context)
script.js:
function get_vars() {
// conduct ajax request:
$.ajax({
url : 'the_url',
success : get_vars_success, // reference to function below:
})
} $(document).ready(get_vars) // or call as needed
function get_vars_success(response) {
// unpack context:
var map_box_token = response.map_box_token;
var drop_in_centers = response.drop_in_centers;
// use as needed:
...
}