10

Googleマップでcss3 border-radiusプロパティを使用して丸い境界線を適用しようとしていますが、クロムでは機能しません。他のブラウザではうまく機能します。アイデアや提案はありますか？ここにコードを入れて、肯定的な返信を待っています。ありがとう

<!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>
4

10 に答える 10

31

私は現在、SafariとChromeで同じ問題を抱えていました。Chrome では translate3d をゼロにし、Safari では webkit-mask-image を追加する必要がありました。

-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);
于 2015-05-29T07:11:18.527 に答える
21

マップ要素ではなく、マップ要素内で div のスタイルを設定する必要があります。

map > div {
    border-radius: 10px;
}
于 2015-06-22T15:36:16.073 に答える
7

画像を使用せずに同じ効果を実現したい場合は、jsfiddle http://jsfiddle.net/alxscms/3Kv99/のソリューションをご覧ください。必要に応じて、マップ内のナビゲーションを壊さずに、色あせた内側の境界線を追加することもできます。

角と枠が丸みを帯びた Google マップ

html のコードは次のとおりです。

<div class="wrapper">
    <div class="map" id="map"></div>
    <i class="top"></i>
    <i class="right"></i>
    <i class="bottom"></i>
    <i class="left"></i>
    <i class="top left"></i>
    <i class="top right"></i>
    <i class="bottom left"></i>
    <i class="bottom right"></i>
</div>

そしてスタイル（scss）：

$radius: 10px;
$thickness: 5px;
$border-color: rgba(black, 0.15);
$background-color: white;

.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
  overflow: hidden;
  margin: 50px;

  & > i {
    display: block;
    position: absolute;

    &.top {
      top: 0;
      border-top: $thickness solid $border-color;
      &:after {
        top: -$radius/2 - $thickness;
        border-top: $radius/2 solid $background-color;
      }
    }
    &.right {
      right: 0;
      border-right: $thickness solid $border-color;
      &:after {
        right: -$radius/2 - $thickness;
        border-right: $radius/2 solid $background-color;
      }
    }
    &.bottom {
      bottom: 0;
      border-bottom: $thickness solid $border-color;
      &:after {
        bottom: -$radius/2 - $thickness;
        border-bottom: $radius/2 solid $background-color;
      }
    }
    &.left {
      left: 0;
      border-left: $thickness solid $border-color;
      &:after {
        left: -$radius/2 - $thickness;
        border-left: $radius/2 solid $background-color;
      }
    }

    &.top:not(.right):not(.left),
    &.bottom:not(.right):not(.left) {
      height: $thickness;
      left: $radius+$thickness;
      right: $radius+$thickness;
    }

    &.left:not(.top):not(.bottom),
    &.right:not(.top):not(.bottom) {
      width: $thickness;
      top: $radius+$thickness;
      bottom: $radius+$thickness;
    }

    &.top.right,
    &.top.left,
    &.bottom.right,
    &.bottom.left {
      width: $radius;
      height: $radius;

      &:after {
        content:"";
        position: absolute;
        width: 1.5*$radius;
        height: 1.5*$radius;
      }
    }

    &.top.right {
      border-top-right-radius: $radius;
      &:after { border-top-right-radius: 1.5*$radius; }
    }
    &.top.left {
      border-top-left-radius: $radius;
      &:after { border-top-left-radius: 1.5*$radius; }
    }
    &.bottom.right {
      border-bottom-right-radius: $radius;
      &:after { border-bottom-right-radius: 1.5*$radius; }
    }
    &.bottom.left {
      border-bottom-left-radius: $radius;
      &:after { border-bottom-left-radius: 1.5*$radius; }
    }
  }
}

#map {
  width: inherit;
  height: inherit;
  .gmnoprint {
    display: none;
  }
}
于 2013-12-05T20:32:34.977 に答える
1

私は最近、私が取り組んでいたプロジェクトでこのアイデアを実装しました。これが私がそれをどのように機能させたかの例です...

ライブ プレビュー: http://jsfiddle.net/h6Tkq/

HTML...

<div class="map" id="map"></div>

次のCSSで...

#map {
    width: 500px;
    height: 200px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
于 2014-07-23T20:07:26.217 に答える