如何将数据从 Flask 传递到模板中的 JavaScript 并将其与 Google 地图一起使用？

将数据从 Flask 传递到模板中的 JavaScript

问题：您想要在 JavaScript 代码中使用从 API 调用检索到的字典在 Flask 模板中，特别是将长/纬度元组传递到 Google Maps API。

解决方案：

要将变量从 Flask 传递到模板中的 JavaScript，您可以在其中的任何地方使用 {{variable}} 语法。例如，在 get_data.html 模板中：

  <script>
    var someJavaScriptVar = '{{ geocode[1] }}';
  </script>


  <p>Hello World</p>
  <button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)">Click me</button>

这会生成包含 JavaScript 变量赋值的 HTML 输出。

要将列表传递给 JavaScript，您需要创建输出中的数组定义：

  
    <script>
      var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
    </script>
  
  
    <p>Hello World</p>
    <button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])">Click me</button>
  

Jinja2 还支持高级 Python 构造。例如，上面的内容可以缩短为：

  <script>
    var myGeocode = [{{ ', '.join(geocode) }}];
  </script>


  <p>Hello World</p>
  <button onclick=""alert('Geocode:" mygeocode></button>

您还可以利用 Jinja2 过滤器。如果您的字典是 JSON 格式，您可以使用 tojson 过滤器将其转换为 JavaScript 对象：

<script>
  var myGeocode = {{ geocode|tojson }};
</script>

以上是如何将数据从 Flask 传递到模板中的 JavaScript 并将其与 Google 地图一起使用？的详细内容。更多信息请关注PHP中文网其他相关文章！