HTML HTML5基本模板（带谷歌加载）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML HTML5基本模板（带谷歌加载）相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Webpage Title</title>
<meta charset="utf-8" />
<script src="http://www.google.com/jsapi"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>
  google.load("jquery", "1.4.2");
</script>
</head>
<body>

</body>
</html>

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

【中文标题】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 没问题。 我对你帮助不大，但很高兴听到它:-) 这可能是本地化问题。这将是解决方法，以字符串形式发送。您应该尝试设置本地化。

以上是关于HTML HTML5基本模板（带谷歌加载）的主要内容，如果未能解决你的问题，请参考以下文章

html 最好的Html5基本模板

html 基本的HTML5页面模板

HTML HTML5基本模板

HTML HTML5基本媒体模板

HTML HTML5基本页面模板

HTML HTML5基本模板