Question

我一直在尝试制作一张圆形谷歌地图。我终于实现了它，这里是jsfiddle

滚动时问题出现在chrome中，当地图向下滚动时，遮罩会保留在同一个位置。

我已经在FF，opera safari和IE上测试过，效果很好。它只是chrome

HTML

<div id="wrapp">
      <div id="mask">
            <div id="anyotherID"></div>
      </div>
</div>

JS

window.onload=function(){
    var myLatlngDist = new google.maps.LatLng(-32.242741,-60.161446);
    geocoder = new google.maps.Geocoder();
    directionsService = new google.maps.DirectionsService();
    var mapOptionsDist = {
        zoom: 4,
        center: myLatlngDist,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    mapDist = new google.maps.Map(document.getElementById('anyotherID'), mapOptionsDist);
}

CSS

#anyotherID{
    height:427px;
    width:428px;
    -webkit-border-radius: 1000px;
    -moz-border-radius: 1000px;
    border-radius: 1000px;
    overflow: hidden;
}
#mask {
    border-radius: 1000px;
    -moz-border-radius: 1000px;
     -webkit-border-radius: 1000px;
     overflow: hidden;
     position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
     /* this fixes the overflow:hidden in Chrome */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

感谢您的帮助！

Answer 1

最终在这里工作的是我如何解决它

HTML：

<div id="wrapp">
   <div id="mask">
       <div id="anyotherID"></div>
   </div>
       <div style="clear:both;"></div>
</div>

使用Javascript：

var mapOptionsDist = {
    zoom: 12,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.BOTTOM_CENTER
    },
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL
    }
}
mapLoc = new google.maps.Map(document.getElementById('anyotherID'), mapOptionsDist);

和css：

#anyotherID{
    height:427px;
    width:427px;
}
#mask {
    border-radius: 1000px;
    -moz-border-radius: 1000px;
    -webkit-border-radius: 1000px;
    height:427px;
    width:427px;
    overflow: hidden;
    position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
    -webkit-mask-image: url("/Resources/Image/px.png");
}
#wrapp{
    height:427px;
    width:427px;
    float:left;
}

只是为了澄清，图像px.png只是一个黑色像素的图像，没有它，它将无法正常工作

在chrome上滚动时Webkit掩码移动

1 个答案: