我正在尝试在 Google map 中使用 css3 border-radius 属性应用圆 Angular 边框，但它在 chrome 中不起作用，在其他浏览器中效果很好。 有什么想法或建议吗？我在这里放我的代码并等待肯定的答复。 谢谢
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Testing</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<style type="text/css" >
#map {
position: absolute;
top: 120px;
left: 0;
right: 0;
bottom:0;
z-index: 1;
overflow: hidden;
border:solid 3px #00FF33;
border-radius:15px;
width: 500px;
height: 200px;
margin:0 auto;
-moz-border-radius:15px;
-webkit-mask-border-radius:15px;
-webkit-border-radius:15px;
}
#wrapper {
position:absolute;
}
</style>
<div id="wrapper">
<div id="map" ></div>
</div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var i,marker;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: 'marker_icon.png',
borderRadius: 20,
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]+' <img src="map-pin.png" /> <div style="background:#090;height:100px;width:200px;">yeah its working perfect ..!!!</div><a href="http://www.google.com">Google</a><form><a href="javascript: alert(\'foo!\');">Click Me</a></form>');
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
最佳答案
我目前在使用 Safari 和 Chrome 时遇到了同样的问题。对于 Chrome，我必须将 translate3d 设置为零，并为 Safari 添加一个 webkit-mask-image:
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);
关于google-maps - 带有谷歌地图的 CSS3 圆 Angular ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16292026/