google-maps - 谷歌地图的自定义标记没有透明度

Question

我有一个 png 图像作为自定义标记放置。代码很简单：

<script type="text/javascript">
    document.write('<div id="gmap" style="width:960px; height:360px;"></div>');
    var map_center = new google.maps.LatLng(xxx, xxx);
    var map = new google.maps.Map( document.getElementById("gmap"), {
        zoom: 11,
        center: map_center,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        panControl: false,
        streetViewControl: false,
        mapTypeControl: false,
        styles: [
        {
          featureType: 'all',
          elementType: 'all',
          stylers: [
            { visibility: "on" },
            { saturation: -100 }
          ]
        }]
    });

    var pos;
    var marker;
    for(var i = 0 ; i < 10 ; i++) {
        pos = new google.maps.LatLng(xxx, xxx);
        marker = new google.maps.Marker({
          position: pos,
          map: map,
          title: 'Tu jesteśmy',
          icon: 'pointer.png',
          optimized: false,
          shadow: 'shadow.png'
      });
    }
</script>

我的问题是，既shadow.png没有也没有pointer.png任何 PNG 比例。两者看起来都像 GIF。我该如何解决这个问题？

Answer 1

问题是您在同一位置创建了多个标记，因此虽然它们是透明的，但您有 10 个堆叠在另一个之上，这看起来像是一个完全不透明的标记。

这是更新后的 Plunker，您的循环减少为一次迭代，以表达我的观点。