Django：在谷歌地图的 javascript 中使用模板标签

Posted 2023-02-24

【中文标题】Django：在谷歌地图的 javascript 中使用模板标签

【英文标题】：Django: using template tags inside of javascript for Google Maps

【发布时间】：2017-08-22 03:06:03

【问题描述】：

我正在尝试在我的 javascript 中使用模板标签使其动态化并根据发送的地址加载地图。我的地图正在运行，我的地理编码也在运行。我什至可以将纬度和经度传递给模板，但是当我将它放在 javascritp 中时，它无法按预期工作。

例如：

如果 html 中的 longitude 是 -122,0843845，我的警报（longitude）只有 -122。似乎我在 Django 将点转换为逗号时出现问题，例如 -122.08... 到 -122,08。无论哪种方式，即使我尝试使用像 -122 这样的整数，它也不起作用。

不确定是浮动到字符串问题还是其他问题，我对 javascript 很陌生。

代码。

views.py

类 ImovelDetail(DetailView): 模型 = Imovel

def get_context_data(self, *args, **kwargs):
    address = "1600 Amphitheatre Parkway, Mountain View, CA"
    api_key = "AIzaSyAiw0iU0egdeVrOKboOOZ2n1WXS3Os0WgI"
    api_response = requests.get('https://maps.googleapis.com/maps/api/geocode/json?address=0&key=1'.format(address, api_key))
    api_response_dict = api_response.json()

    if api_response_dict['status'] == 'OK':
        context = super(ImovelDetail, self).get_context_data(**kwargs)
        latitude = api_response_dict['results'][0]['geometry']['location']['lat']
        longitude  = api_response_dict['results'][0]['geometry']['location']['lng']
        print(latitude)
        context.update('latitude': latitude, 'longitude': longitude)
        return context

模板.html

% block js %
    <!-- <script>
    SOMETHING THAT I TRIED
        var latitude =  latitude ;
        var longitude =  longitude ;
    </script> -->
    <script>
    function initMap() 
        var address = lat: latitude, lng:longitude ;

        var map = new google.maps.Map(document.getElementById('map'), 
          zoom: 15,
          center: address
        );
        var marker = new google.maps.Marker(
          position: address,
          map: map
        );
    
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAiw0iU0egdeVrOKboOOZ2n1WXS3Os0WgI&callback=initMap"></script>
% endblock %

【参考方案1】：

这是因为 javascript 在十进制数字中使用点。因此，如果您将数字传递给 javascript，则需要使用点。像这样：159.0857 如果你用逗号传递它，javascript 会舍入它

如果您使用带逗号的坐标（这不是很好的方法）。然后你需要替换逗号。也许是custom filter。但我怎么说。使用带点的十进制数字会更好。

当然，如果页面上有一些对象，您可以将坐标（带点）分配给 html 元素。

<p class="address" latitude="49.055" longitude="40.808">Your address</p>

然后您可以通过 JQuery 或 javascript 获取此值。

如果您的 lat 和 lon 中有逗号，则必须先替换它。在你看来试试这个：

return context.update('latitude': float(latitude.replace(',','.')), 'longitude': float(longitude.replace(',','.'))

已编辑 可能导致这个问题的最后一件事（你说在你的标准输出上没问题）是本地化。检查这个answer

你必须设置USE_L10N=False

【讨论】：

我试过这样context.update('latitude': float(latitude), 'longitude': float(longitude)) 它以虚线浮动的形式打印到终端，并且在模板中显示为逗号。我也尝试过像 122 这样的常规整数，但没有任何效果。

最后一次尝试对我来说有意义的是本地化。试试附加的链接。

我明白了！你的回答很有帮助！将它作为字符串传递是有效的。我在视图中添加了latitude = str(latitude) 和longitude = str(longitude)，它对javascript 没问题。

我对你帮助不大，但很高兴听到它:-) 这可能是本地化问题。这将是解决方法，以字符串形式发送。您应该尝试设置本地化。