将Javascript内的模板标记与Django一起使用

我正在使用

Django

制作一个IP地址跟踪器，我正在使用谷歌地图API创建地图，对于地理位置，我希望它在我打开页面时自动在地图上显示我的位置，如果是另一个IP地址，则显示该IP地址在地图上的位置

问题是，我不知道如何将

Django

代码集成到坐标的

Javascript

，或者我不知道是否有其他方法使其更容易，或者与其他API一起

在coord变量中的Javascript文件中，我想传递jsonlat和longit的参数，以便Javascript的lat和lng接受它

档案：

views.py：

from django.shortcuts import render
from django.views.generic import View
import requests

def get_ip_tracker(request):
    response = requests.get('http://ip-api.com/json/')
    geodata = response.json()
    data= {
            'ip': geodata['query'],
            'country': geodata['country'],
            'timezone':geodata['timezone'],
            'lat': geodata['lat'],
            'longit': geodata['lon'],
            'isp':geodata['isp'],
            'api_key':'My api key',
        }

    return render(request, 'geolocationip/home.html', data)

script.js：

    function initMap(){
       //var lat="{{ lat }}";
       //var lng="{{ longit }}";       
       var coord = {lat: ?, lng: ?};
       console.log(coord) 
       var map = new google.maps.Map(document.getElementById('map'),{
          zoom: 10,
          center: coord
        });
        var marker = new google.maps.Marker({
          position: coord,
          map: map
        });
      }

home.html：

{% extends 'base.html' %}
{% load static %}
    
{% block content %}
<h1 id="ip">IP Address Tracker</h1>

<form method="get"id="form">
    <input><button>Search</button>
</form>

  <div id="card">
    <p>Your ip address is <strong>{{ ip }}</strong>, and you are probably in <strong>{{ country }}</strong> right now, and 
    <strong>{{timezone}}</strong> and <strong>{{isp}}</strong></p>
  </div>  

<div id="map"></div>
{% endblock content %}


{% block js %}

<script src="https://maps.googleapis.com/maps/api/js?key={{ api_key }}&callback=initMap&libraries=&v=weekly"defer></script>

{% endblock js %}

{%extends'base.html%}
{%load static%}
{%block content%}
IP地址跟踪器
搜寻
您的ip地址是{ip}，您现在可能在{country}，并且
{{timezone}和{{isp}}

{%endblock内容%}
{%block js%}
{%endblock js%}

我的应用程序：