Javascript 正在发送.py->。将html值转换为.js（Django、Mapbox）_Javascript_Html_Django_Mapbox

Javascript 正在发送.py->。将html值转换为.js（Django、Mapbox）

javascript html django mapbox

Javascript 正在发送.py->。将html值转换为.js（Django、Mapbox）,javascript,html,django,mapbox,Javascript,Html,Django,Mapbox,下面是我在main.html文件中的代码： <body> <h1>mappymappy</h1> <div id='map'></div> <script> mapboxgl.accessToken = '{{ mapbox_access_token }}' var map = new mapboxgl.Map({ container: 'map', style: 'map

下面是我在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 %}


mappymappy
mapboxgl.accessToken='{{mapbox\u access\u token}}'
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v11',
中心：[-73.9911,40.7051]，
缩放：9.5
})
{放置中的中心为%u，放置中的中心为%}
新的mapboxgl.Marker（{“颜色”：“红色”}）
.setLngLat（[{{center.longitude}，{{{center.latitude}}]））
.setPopup（新的mapboxgl.Popup（{offset:25}）
.setHTML（“放置在中心{{Center.Center\u name}”））
.addTo（地图）
{%endfor%}

我想将脚本移动到一个单独的.js文件中。然而，为了做到这一点，我必须想办法

将值

mapbox\u access\u token

和

drop\u in\u centers

发送到.js文件

并使这些值能够在.js文件中使用

我该怎么做

mapbox\u access\u token

和

drop\u in\u 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)

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)

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>

选项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 = {
        'map_box_token' : map_box_token,
        'drop_in_centers' : drop_in_centers,
    }

    return render(request, 'template.html', context)

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：

console.log(map_box_token) // ex: use as needed
console.log(drop_in_centers) // ex: use as needed

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:
  ...

}

我会在选项1中为模板的js声明添加默认值，但这是解决方案。。。还要注意，如果需要纯JS，那么它必须是Ajax调用。