我为我正在开发的网站制作了自定义标记。它的工作原理,除了需要是圆形的标记,它周围显示一个框阴影。我需要删除框阴影。这是一个截图:
如何删除这些阴影并仅留下标记的圆形部分? 这是我的标记代码(由于有多个标记而从for循环加载):
for (i = 0; i < locations.length; i++) {
//string temp = builder.concat(i.toString());
marker = new RichMarker({
position: new google.maps.LatLng(locations[i]['lat'], locations[i]['lng']),
map: map,
content: '<img width="40" height="40" class="circ map-thumbnail" src="./img/testpic.jpg"/>',
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i]['name']);
infowindow.open(map, marker);
}
})(marker, i));
google.maps.event.addListener(marker, 'mouseover', function(event) {
this.setZIndex(10);
});
google.maps.event.addListener(marker, 'mouseout', function(event) {
this.setZIndex(0);
});
}
这是css:
img.map-thumbnail {
cursor: pointer;
border: 2px solid #ffffff;
}
.circ {
border-radius:99px;
-moz-border-radius:99px;
-webkit-border-radius:99px;
background:red;
color:#fff;
border:3px #fff solid;
background-color: #e7676d;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e7676d), to(#b7070a)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #e7676d, #b7070a); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #e7676d, #b7070a); /* FF3.6 */
background-image: -ms-linear-gradient(top, #e7676d, #b7070a); /* IE10 */
background-image: -o-linear-gradient(top, #e7676d, #b7070a); /* Opera 11.10+ */
background-image: linear-gradient(top, #e7676d, #b7070a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e7676d', EndColorStr='#b7070a');
-webkit-box-shadow: none; /* Saf3-4 */
-moz-box-shadow: none; /* FF3.5 - 3.6 */
box-shadow: none; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
display:inline-block;
padding:2px 2px 2px 2px ;
margin:3px;
font-family:arial;
font-weight:bold;
}
答案 0 :(得分:4)
将shadow: 'none'
添加到您的RichMarker。
marker = new RichMarker({
position: new google.maps.LatLng(locations[i]['lat'], locations[i]['lng']),
map: map,
content: '<img width="40" height="40" class="circ" src="./img/testpic.jpg"/>',
animation: google.maps.Animation.DROP,
shadow: 'none'
});