Javascript 使用css使google maps api循环

我使用

边界半径：50%使地图成为圆形。我遇到的问题是，当页面加载时，在地图变成圆形之前，地图是正方形的。这是我创建的JSFIDLE。当您单击播放按钮时，地图会呈方形一秒钟。有没有办法让图像看起来是圆形的，这样它一秒钟都不会显示为正方形

代码片段：


#气泡{
保证金：0自动；
宽度：400px；
高度：85px；
溢出：隐藏；
位置：相对位置；
边框左下半径：40px；
边框左上半径：40px；
边框右下半径：40px；
边框右上角半径：40px；
背景色：#FFF；
盒影：0.01px 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{
字体大小：粗体；
利润上限：-50px；
}
img{
垫底：10%；
}
#地图画布{
宽度：80px；
高度：80px；
边界半径：50%；
利润上限：3倍；
左边距：3倍；
}



（功能（窗口、谷歌、lat、液化天然气）{
变量选项={
中心：{
拉特：拉特，
液化天然气：液化天然气
},
缩放：5
},
element=document.getElementById（'map-canvas'）
var map=new google.maps.map（元素，选项）
}（window，window.google，37.791350，-122.436883））；
呈现地图本身的div（
#地图画布div.gm样式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;">

jsiddle:
呈现地图本身的div（
#map canvas div.gm样式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;">

JSFiddle:
将映射放入
包装器中

然后，向该div添加一个，并给它一个
径向渐变
背景，中间部分透明

其他背景颜色必须与文档背景相匹配。在这种情况下，它是白色的

然后将
指针事件：none
添加到覆盖中，以便可以单击它

这也可以防止在地图中四处移动和拖动时出现问题

它将始终保持
边界半径

旁注：当您隐藏谷歌徽标时，您的设计理念违反了谷歌地图的条款和条件。如果您必须完成此操作，请务必认真阅读条款和条件

工作示例：


.wrapper{
溢出：隐藏；
宽度：400px；
高度：400px；
位置：相对位置；
}
.包装工：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
指针事件：无；
背景：径向梯度（透明60%，白色40%）；
}

函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{
拉脱维亚：40.674，
液化天然气：-73.945
},
缩放：12，
})
}
将地图放入
.wrapper
div中

然后，向该div添加一个，并给它一个
径向渐变
背景，中间部分透明

其他背景颜色必须与文档背景相匹配。在这种情况下，它是白色的

然后将
指针事件：none
添加到覆盖中，以便可以单击它

这也可以防止在地图中四处移动和拖动时出现问题

它将始终保持
边界半径

旁注：当您隐藏谷歌徽标时，您的设计理念违反了谷歌地图的条款和条件。如果您必须完成此操作，请务必认真阅读条款和条件

工作示例：


.wrapper{
溢出：隐藏；
宽度：400px；
高度：400px；
位置：相对位置；
}
.包装工：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
指针事件：无；
背景：径向梯度（透明60%，白色40%）；
}

函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{
拉脱维亚：40.674，
液化天然气：-73.945
},
缩放：12，
})
}
在页面的何处指定样式？如果不是在脑袋里——试试看。@plntxt。样式是用于CSS中的#map canvas的，您能修复小提琴以便它加载地图吗？@Aaron-我的意思是，在您的（非JSFIDLE）文档中，您在哪里将样式应用于div？它在样式表中吗？也不确定你是否注意到了，但因为它是嵌入谷歌地图的，所以你可以拖动它，等等。。。拖动时，它也会返回到方形。您在页面的何处指定样式？如果不是在脑袋里——试试看。@plntxt。样式是用于CSS中的#map canvas的，您能修复小提琴以便它加载地图吗？@Aaron-我的意思是，在您的（非JSFIDLE）文档中，您在哪里将样式应用于div？它在样式表中吗？也不确定你是否注意到了，但因为它是嵌入谷歌地图的，所以你可以拖动它，等等。。。它在拖动时也会回到正方形。