Question

我的网站上有多个谷歌地图实例，现在在同一页面上有两个不同的谷歌地图，会发生的事情是第一个有效，其他没有现在我知道逻辑问题让我告诉你我的代码第一

<script>
    function initMap() {
        var myLatLng = {lat: 43.6222102, lng:-79.6694881};

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 15,
            center: myLatLng
        });

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
        });
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=my_key&callback=initMap"
        async defer></script>

现在我定义了一个回调方法，它总是初始化名为 initMap 的方法，而我想做的是可以有多个谷歌地图让我们假设 initMap2 我怎么能加载它们没有回调方法？

Answer 1

要在没有回调的情况下加载地图，请同步/内联加载API（不使用async defer），然后在加载事件上调用initMap函数。

（注意：仅供参考：Google将所有示例更改为使用异步加载来改善加载时间）

（注2： Google添加了"sample" to their documentation describing synchronous loading）

proof of concept fiddle

代码段

＆＃13;

function initMap() {
  var myLatLng = {
    lat: 43.6222102,
    lng: -79.6694881
  };

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
  });
}
google.maps.event.addDomListener(window, 'load', initMap);

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

＆＃13;

加载谷歌地图而不使用回调方法

1 个答案: