在 Safari 中裁剪谷歌地图的问题答案

【问题标题】：Issue clipping Google Map in Safari在 Safari 中裁剪谷歌地图的问题
【发布时间】：2014-10-15 05:27:32
【问题描述】：

我正在尝试在 Safari 中剪辑 Google 地图。我使用的 CSS 在 Chrome 和 Firefox 中运行良好。请看这个fiddle

<head>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
        function initialize() {

          var myLatLng = new google.maps.LatLng(-33.887097, 18.511804);
          var mapCanvas = document.getElementById('map_canvas');

          var mapOptions = {
            center: myLatLng,
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true
          }

          var map = new google.maps.Map(mapCanvas, mapOptions);

          var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,  
          }); 
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>


<body>

<div style="width:260px; height:260px; position:absolute; left:0; right:0; top:60px; margin:auto;">
            <div id="map_canvas" class="map_container"></div>
        </div>

</body>

.map_container {

  width:260px; 
  height:260px; 
  overflow:hidden; 

  border-radius: 50% !important;
  border: 1px solid black !important;
}

我怎样才能让地图在 Safari 中剪辑并仍然保留边框？

【问题讨论】：

附带说明：您以这种方式显示地图违反了 Google 的服务条款，因为您不应该：(ix) 删除、隐藏或无法显示通过服务提供或在 Maps API 文档中描述的使用条款链接； (x) 删除、隐藏或以任何方式更改出现在服务或内容中的任何品牌特征、徽标、警告、通知（包括但不限于任何版权或其他所有权通知）或链接；见developers.google.com/maps/terms

标签： css google-maps-api-3 safari

【解决方案1】：

试试这个

JS Fiddle

为.map_container 的容器添加了border

.container {
    border-radius:50%;
    border:1px solid #000000;
}
.map_container {
    width:260px;
    height:260px;
    overflow:hidden;
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black); /** added mask image **/
    border-radius: 50% !important;
    /*border: 1px solid black !important;*/
}

了解更多关于translatez(0)

【讨论】：