Question

我在子模板上显示多个Google地图时遇到问题。只显示脚本中的第一个初始化地图，第二个似乎被忽略。

如果我在一个子模板上放置两个地图，一切正常，但将第二个地图添加到其他模板会使第二个地图无效。

base.html文件：

{% block body %}
<h1>Base</h1>
{% endblock %}

<script>
function initMap() {
    var uluru = {lat: 12, lng: 23};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: uluru
    });

    var uluru2 = {lat: 13, lng: 24};
    var map2 = new google.maps.Map(document.getElementById('map2'), {
      zoom: 6,
      center: uluru2
    });

child.html ：

{% extends 'base.html' %}

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

child2.html ：

{% extends 'base.html' %}

{% block body %}
<div id="map2"></div>
{% endblock %}

Answer 1

不幸的是，我发现只有通过子模板拆分地图初始化的解决方案。

<强> child.html ：

{% extends 'base.html' %}

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

<script>
    function initMap() {
        var uluru = {lat: 12, lng: 23};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 6,
          center: uluru
    });
</script>

<强> child2.html ：

{% extends 'base.html' %}

{% block body %}
<div id="map2"></div>
{% endblock %}

<script>
    function initMap() {
        var uluru2 = {lat: 13, lng: 24};
        var map2 = new google.maps.Map(document.getElementById('map2'), {
          zoom: 6,
          center: uluru2
    });
</script>

在子模板上显示多个Google Map V3

1 个答案: