Question

我已为每张地图添加了两张不同的谷歌地图，其中包含不同的纬度和经度，但前端只显示其中一张地图。

我对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>

我们非常感谢您解决此问题。

Answer 1

尝试仅使用一个功能。我猜测控制台中有一个警告，告诉您正在尝试重新声明函数initMap。

Answer 2

将您声明函数的函数之一的名称更改为全局变量，然后将其重置为新映射，只需重命名其中一个函数，例如将名称替换为第二个函数initmap2

一个页面上有两个不同的Google地图，但只显示其中一个

2 个答案: