删除谷歌地图的渲染阻塞 JavaScript

Question

PageSpeed Insights 向我展示了我要删除谷歌地图 js 的渲染阻塞。它被添加到cms内容中，这是代码：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=myipcode">// <![CDATA[

// ]]></script>
<script type="text/javascript">// <![CDATA[
function initialize() {
  var myLatlng = new google.maps.LatLng(mycoord1, mycoord2);
  var mapOptions = {
    zoom: 17,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'My Title'
  });
}

google.maps.event.addDomListener(窗口, '加载', 初始化);// ]]>

 

如果我添加 async="async" 到 地图未加载，但来自页面速度的消息消失。我应该怎么办 ？

Answer 1

尝试以下操作

<div id="map"></div>

<script type="text/javascript">
function initializeMap() {
  var myLatlng = new google.maps.LatLng(mycoord1, mycoord2);
  var mapOptions = {
    zoom: 17,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'My Title'
  });
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=myipcode&callback=initializeMap"
        async defer></script>

将外部脚本标记放置在其余部分之后至关重要，这样它就有了可以回调的内容。另外，使用异步意味着您必须添加一个回调方法以使其初始化。

我建议不要 initialize 作为方法名称，因为它非常通用并且可能在其他地方使用