javascript - 从谷歌地图中的自定义标记中删除框阴影

标签 javascript html css google-maps google-maps-api-3

我为我正在开发的网站制作了自定义标记。它的工作原理,除了需要是圆形的标记,在它周围显示一个盒子阴影。我需要删除框阴影。这是一个屏幕截图:

enter image description here 如何去除这些阴影并只留下标记的圆形部分可见? 这是我的标记代码(这是从 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;
   }

最佳答案

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'
});

关于javascript - 从谷歌地图中的自定义标记中删除框阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33262250/

相关文章:

javascript - 在 Rails 中预加载鼠标悬停图像

javascript - 我的 div 在第一次执行后消失

javascript - 为什么谷歌分析代码不使用 AJAX

android - 使用 Phonegap 的 Android 实时视频流?

javascript - 如何从 npm 生成纯 javascript

html - 适用于所有主要浏览器的视频编解码器

html - 风格只取决于头等舱?

html - 具有内联 block 属性的文本的空 div 与 div

html - 我怎样才能让 CSS-Transforms 工作

asp.net - 格式验证摘要