javascript - 使用 css 使 google maps api 循环

Question

我正在使用 border-radius: 50%; 使 map 呈圆形。我遇到的问题是当页面加载 map 时，在 map 变为圆形之前一秒钟是方形的。这是我创建的 jsfiddle https://jsfiddle.net/tnk240zb/2/ .当您单击播放按钮时， map 会暂时变为正方形。有没有办法让图像看起来是圆形的，所以它不会在一秒钟内显示为正方形？

代码片段:

#bubble {
  margin: 0 auto;
  width: 400px;
  height: 85px;
  overflow: hidden;
  position: relative;
  border-bottom-left-radius: 40px;
  border-top-left-radius: 40px;
  border-bottom-right-radius: 40px;
  border-top-right-radius: 40px;
  background-color: #FFF;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 50px rgba(0, 0, 0, 0.05);
}

p {
  font-weight: bold;
  margin-top: -50px;
}

img {
  padding-bottom: 10%;
}

#map-canvas {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-top: 3px;
  margin-left: 3px;
}

<div id="bubble">
  <div id="map-canvas"></div>

  <div style="display: inline-block;">
    <p id="user"></p>
    <p id="plan"></p>
  </div>
</div>
<script src="https://maps.googleapis.com/maps/api/js"></script>

<script>
  (function(window, google, lat, lng) {
    var options = {
        center: {
          lat: lat,
          lng: lng
        },
        zoom: 5
      },
      element = document.getElementById('map-canvas')
    var map = new google.maps.Map(element, options)
  }(window, window.google, 37.791350, -122.436883));
</script>

Answer 1

呈现 map 本身的 div (#map-canvas div .gm-style div) 在其内联样式中使用 z-index: 0:

<div tabindex="0" style="position: absolute; z-index: 0; left: 0px; top: 0px; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; cursor: url(&quot;https://maps.gstatic.com/mapfiles/openhand_8_8.cur&quot;) 8 8, default;">

将你的 #map-canvas 的 z-index 设置为高于 0，它会正常工作:

#map-canvas {
  /* (...) */
  z-index: 1;
}

JSFiddle:https://jsfiddle.net/yuriy636/tnk240zb/3/