问题:您想要在 JavaScript 代码中使用从 API 调用检索到的字典在 Flask 模板中,特别是将长/纬度元组传递到 Google Maps API。
解决方案:
要将变量从 Flask 传递到模板中的 JavaScript,您可以在其中的任何地方使用 {{variable}} 语法。例如,在 get_data.html 模板中:
<html> <head> <script> var someJavaScriptVar = '{{ geocode[1] }}'; </script> </head> <body> <p>Hello World</p> <button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)">Click me</button> </body> </html>
这会生成包含 JavaScript 变量赋值的 HTML 输出。
要将列表传递给 JavaScript,您需要创建输出中的数组定义:
<html> <head> <script> var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}']; </script> </head> <body> <p>Hello World</p> <button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])">Click me</button> </body> </html>
Jinja2 还支持高级 Python 构造。例如,上面的内容可以缩短为:
<html> <head> <script> var myGeocode = [{{ ', '.join(geocode) }}]; </script> </head> <body> <p>Hello World</p> <button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" /> </body> </html>
您还可以利用 Jinja2 过滤器。如果您的字典是 JSON 格式,您可以使用 tojson 过滤器将其转换为 JavaScript 对象:
<script> var myGeocode = {{ geocode|tojson }}; </script>
以上是如何将数据从 Flask 传递到模板中的 JavaScript 并将其与 Google 地图一起使用?的详细内容。更多信息请关注PHP中文网其他相关文章!