Question

我有正确运行的谷歌地图。现在我想要将地图剪裁为气泡形状。这不是我所说的指针/市场，它是整个地图必须用气泡覆盖物掩盖。目前地图呈矩形。

我上传了样本图片。

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

说实话，我不确定这是否可行，因为我之前探讨了一些svg选项，但似乎并不适用于所有浏览器。

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

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

非常感谢提前。

Answer 1

创建一个形状为clipPath的气泡，并使用clip-path属性将其应用于地图。

this question的已接受答案有一个动态示例，可能比您需要的更复杂，但应该告诉您要走的路。

Answer 2

刚刚看到这篇文章并且很难尝试解决这个问题，但这里是我提出的an example。我使用了从Sketch导出的SVG的路径，它仍然需要一些调整但是很开心。

<强>的index.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>

<强>的script.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);

<强>的style.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);
}

如何剪辑（或掩盖）谷歌地图

2 个答案: