html2canvas谷歌地图市场标签消失-z-index问题？

Question

我在从谷歌地图上获取html2canvas生成的图像上的标签时遇到问题。我尝试使用最新的html2canvas库，因为图像质量要好得多，但是会出现标签问题。我的搜索导致出现z-index问题，但我自己无法解决。请指教

这是工作代码：https://jsfiddle.net/84mcwt17/9/

有问题https://pasteboard.co/IJKZ7Vf.png的图像

html代码：

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
    async defer></script>

 <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js">
</script>
<div id="map" ></div>

<br/>
<input type="button" id="btnSave" value="Save PNG"/>

  <div id="img-out"></div>

JS代码：

    $(function() { 
    var map;
    var latlng = new google.maps.LatLng(49.241943, -122.889318);

    var myOptions = {
        zoom: 12,
        center: latlng,
        fullscreenControl: false,
        scale:1,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions); 
    var positions = [
       new google.maps.LatLng(49.241, -122.899318),
       new google.maps.LatLng(49.242, -122.889318),
       new google.maps.LatLng(49.243, -122.909318)
       ]
    for (var pos of positions){
        let marker = new google.maps.Marker({
          position: pos,
          map: map,
          optimized: false,
          draggable:true,
          label:'1',
        });
            marker.setMap(map);
        }
    $("#btnSave").click(function() { 
              addMapBase64();
            }); });
  function addMapBase64() {
        var target = document.getElementById("map");
        html2canvas(target, {
                useCORS: true
            })
            .then(function (canvas) {
                var canvasImg = canvas.toDataURL("image/png");
                console.log(canvasImg);
                $('#img-out').html('<img src="' + canvasImg + '" alt="">');
                document.getElementById("id_map_base64").value = canvas.toDataURL('image/png');

            })
            .catch(function (err) {
                console.log(err);
            });

    }

css

#map {
    width: 300px;
    height: 200px;
}

Answer 1

向标记添加'zIndex：0'解决了问题

let marker = new google.maps.Marker({
          position: pos,
          map: map,
          optimized: false,
          draggable:true,
          label:'1',
          zIndex: 0
        });