在 django 模板中集成 Google Maps API答案

【问题标题】：Integrate Google Maps API in django template在 django 模板中集成 Google Maps API
【发布时间】：2017-03-27 11:04:52
【问题描述】：

我有一个查询返回城市的长/纬度参数，并希望在模板中显示地图。根据 Google 的说明，我无法理解在哪里粘贴 javascript 代码。

相反，我继续执行以下操作：

在 html 模板中创建了地图 div（从 base.html 扩展）
在 javascript.html 模板中粘贴了带有 API 密钥的脚本
在静态文件夹的 map.js 文件中添加了 javascript 脚本

控制台显示：“initMap 不是函数” 有人可以帮忙吗？

【问题讨论】：

标签： django google-maps

【解决方案1】：

一个好的做法是在关闭 body 元素之前在 base.html 中定义一个名为 footer 的块，并在此内容中加载所有 js 文件/代码。

base.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head> </head>
    <body>
    {% block footercontent %}
    {% endblock %}
    </body>
</html>

yourtemplate.html

{% extends "base.html" %}
{% block footercontent %}
       <script src="myscripts.js"></script>
{% endblock %}

【讨论】：

【解决方案2】：

所以我看起来你可能复制了文档上的示例脚本标记，控制台上显示的错误意味着没有名为 initMap 的函数。您会在脚本标签 src 的末尾看到 &callback=initMap 其中 initMap 是当 google maps js 文件准备好使用时要调用的函数的名称。

也许您没有在 javascript.html 模板中导入静态文件夹的 map.js。

专业提示：使用v=3 参数来获得稳定版的谷歌地图api，就像这样（more info）：

<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3
    &key=YOUR_API_KEY&callback=initMap">

【讨论】：