0

我有一个正确运行的谷歌地图。现在我希望将该地图剪裁为气泡形状。这不是我在谈论的指针/市场，而是必须用气泡叠加层掩盖的整个地图。目前地图是呈矩形。

我已经上传了示例图片。

http://s17.postimg.org/v26nk9p4f/mapbg.png

老实说，我不确定这是否可能，就像在我探索一些 svg 选项之前一样，它似乎不适用于所有浏览器。

我可以将气泡用作地图顶部的叠加层，但叠加层 img 必须是透明的，并且背景 div 具有不同的颜色。所以这就是问题所在。

我可以使用任何其他技巧或建议来实现相同的输出。

提前谢谢了。

4

2 回答 2

1

Create a bubble shaped clipPath and apply that to the map using the clip-path property.

The accepted answer to this question has an dynamic example which may be more complicated than you need but should show you the way to go.

于 2013-08-29T09:23:41.827 回答
1

刚看到这篇文章，很难解决这个问题，但这是我想出的一个例子。我使用了从 Sketch 导出的 SVG 路径，它仍然需要一些调整，但玩得开心。

索引.html

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBSDlMWErr_gwT5d5wze8oK9muKPuHLtKQ">
    </script>
<div id="map-canvas"></div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
  <clipPath id="chopChop">
    <path id="svgPath" d="M458.306721,357.359262 L458.306721,154.888126 C458.306721,154.888126 458.306721,123.735028 431.347502,108.158479 L330.082536,49.6444164 L330.082536,49.6684173 L256.112579,6.92291067 C256.112579,6.92291067 229.15336,-8.65363834 202.194141,6.92291067 L26.9592189,108.158479 C26.9592189,108.158479 1.13686838e-13,123.735028 1.13686838e-13,154.888126 L1.13686838e-13,357.359262 C1.13686838e-13,357.359262 1.13686838e-13,388.51236 26.9592189,404.088909 L202.194141,505.324477 C202.194141,505.324477 229.15336,520.901026 256.112579,505.324477 L351.765039,450.050529 L431.347502,404.088909 C431.347502,404.088909 458.306721,388.51236 458.306721,357.359262"/>
  </clipPath>
  <path id="svgMask" d="M458.306721,357.359262 L458.306721,154.888126 C458.306721,154.888126 458.306721,123.735028 431.347502,108.158479 L330.082536,49.6444164 L330.082536,49.6684173 L256.112579,6.92291067 C256.112579,6.92291067 229.15336,-8.65363834 202.194141,6.92291067 L26.9592189,108.158479 C26.9592189,108.158479 1.13686838e-13,123.735028 1.13686838e-13,154.888126 L1.13686838e-13,357.359262 C1.13686838e-13,357.359262 1.13686838e-13,388.51236 26.9592189,404.088909 L202.194141,505.324477 C202.194141,505.324477 229.15336,520.901026 256.112579,505.324477 L351.765039,450.050529 L431.347502,404.088909 C431.347502,404.088909 458.306721,388.51236 458.306721,357.359262"  />
</svg>

脚本.js

  function initialize() {
    var mapOptions = {
      center: { lat: 52.517010, lng: 13.378540},
      zoom: 14,
      styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#193341"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#2c5a71"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#29768a"},{"lightness":-37}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#3e606f"},{"weight":2},{"gamma":0.84}]},{"elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"weight":0.6},{"color":"#1a3541"}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#2c5a71"}]}],
      disableDefaultUI: true
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);

样式.css

html, body, #map-canvas { height: 530px;width: 460px; margin: 0; padding: 0;}
#map-canvas{
  /*Chrome,Safari*/
  -webkit-clip-path: url(#chopChop);

  /* Firefox*/
  clip-path: url(#chopChop);

  /* iOS support */
   -webkit-mask: url(#chopChop);
}
于 2015-06-22T15:32:13.660 回答