两个不同的谷歌地图在一个页面上，但只有一个显示

Two different Google Maps on one page, but only one of them is showing

本文关键字：显示 有一个 两个 谷歌地图 一个      更新时间：2023-09-26

我为每个地图添加了两个不同的Google地图，具有不同的纬度和经度，但只有一个地图在前端显示。

我不是很好与JavaScript，但我认为initMap函数必须创建成一个函数，因为现在有两个initMap函数，我认为这是导致问题，如果我不是完全错误在这里。

Javascript: 

<script>
  // You can set control options to change the default position or style of many
  // of the map controls.
  function initMap() {
    var map = new google.maps.Map(document.getElementById('osloAirport'), {
      zoom: 15,
      center: {lat: 60.21048, lng: 11.06702},
      mapTypeControl: true,
      scrollwheel: false,
      draggable: !("ontouchend" in document),    
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: ['roadmap', 'terrain']
      }
    });
  }
</script>
<script>
  // You can set control options to change the default position or style of many
  // of the map controls.
  function initMap() {
    var map = new google.maps.Map(document.getElementById('torpAirport'), {
      zoom: 15,
      center: {lat: 59.18245, lng: 10.25691},
      mapTypeControl: true,
      scrollwheel: false,
      draggable: !("ontouchend" in document),    
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: ['roadmap', 'terrain']
      }
    });
  }
</script>
HTML: 

    <div class="container">
        <div class="row text-center">
            <div class="col-md-6 col-xs-12">
            <!--<img style="margin: 0 auto;" src="img/team/1.jpg" class="img-responsive" alt="">-->
            <div id="osloAirport" style="width:auto;height:265px;margin-top: 20px;"></div>
            <div class="airports">
                <h4 class="service-heading"><span>Oslo</span> Airport</h4>
                <p class="service-second-heading">Dummy text</p>
                <p class="text-muted">This is just dummy text</p>
            </div>
            </div>
            <div class="col-md-6 col-xs-12">
            <!--<img style="margin: 0 auto;" src="img/team/2.jpg" class="img-responsive" alt="">-->
            <div id="torpAirport" style="width:auto;height:265px;margin-top: 20px;"></div>                
            <div class="airports">                                
                <h4 class="service-heading"><span>Sandefjord Torp</span> Airport</h4>
                <p class="service-second-heading">Dummy text</p>
                <p class="text-muted">This is just dummy text.</p>
            </div>
            </div>
        </div>
    </div>

尝试只使用一个函数。我猜有一个警告在控制台告诉你，你正试图重新声明函数initMap。

改变其中一个函数的名称你将一个函数声明为全局变量然后将它的值重置为一个新的映射，你所要做的就是重命名其中一个函数例如将第二个函数命名为initmap2

相关文章：