Flask의 데이터를 템플릿의 JavaScript로 전달하고 Google 지도에서 사용하는 방법은 무엇입니까?-파이썬 튜토리얼-php.cn

Flask의 데이터를 템플릿의 JavaScript로 전달하고 Google 지도에서 사용하는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-10-30 13:57:27

원래의

1089명이 탐색했습니다.

How to Pass Data from Flask to JavaScript in a Template and Use it with Google Maps?

Flask에서 템플릿의 JavaScript로 데이터 전달

문제: JavaScript 코드의 API 호출에서 검색된 사전을 활용하려고 합니다. 특히 장/위도 튜플을 Google Maps API에 전달하기 위해 Flask 템플릿 내에서 사용합니다.

해결책:

Flask에서 템플릿의 JavaScript로 변수를 전달하려면 그 안 어디에서나 {{ 변수 }} 구문을 사용할 수 있습니다. 예를 들어, 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=&quot;alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])&quot; />
</body>
</html>

로그인 후 복사

Jinja2 필터를 활용할 수도 있습니다. 사전이 JSON 형식인 경우 tojson 필터를 사용하여 JavaScript 개체로 변환할 수 있습니다.

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

로그인 후 복사

위 내용은 Flask의 데이터를 템플릿의 JavaScript로 전달하고 Google 지도에서 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!