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

Posted 2023-02-24

【中文标题】在子模板上显示多个 Google Map V3

【英文标题】：Displaying more than one Google Map V3 on child templates

【发布时间】：2017-08-24 06:59:01

【问题描述】：

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

如果我在一个子模板上​​放置两张地图，一切正常，但将第二张地图添加到另一个模板会导致第二张地图无法正常工作。

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 %

【参考方案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>