Question

在我的网页中，我需要显示谷歌地图。但我的网页还包含画布元素。

现在如果我将z：画布的索引高于地图我无法放大或平移到左/右。如果我使地图的z：index高于canvas元素，它会覆盖整个页面，因此我无法看到通过画布绘制的三角形。

我使用了css属性pointer-events:none;，但它只适用于chrome和Mozilla（在很大程度上）。但是IE（10）没有使用支持它。

我如何在IE中实现相同的.i.e缩放和平移。

这是hmtl部分

 <section id="intro3" data-navigation-tag="Plan" style="display: block; background-position: 50% 44.866px;">
        <canvas id="amenitycanvas" style="display:none;z-index:2;pointer-events:none;"></canvas>
<div id="link" style="position:absolute;">
           <a href="#" onclick="HideAndShowFunc('LOCATION')">LOCATION</a><br>
        </div>

<div class="image-display" id="displaylocate" style=" width:100%; height:100%;right:0%;top:0%;position:absolute;display:none;z-index:1;"> 
            <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.co.in/maps?t=m&amp;q=Vaikunthlal+Mehta+Rd,+Nehru+Nagar,+Airport+Area,+Juhu&amp;ie=UTF8&amp;hq=&amp;hnear=Vaikunthlal+Mehta+Rd,+Nehru+Nagar,+Airport+Area,+Juhu,+Mumbai,+Mumbai+Suburban,+Maharashtra&amp;z=14&amp;ll=19.104093,72.840396&amp;output=embed"></iframe><br /><small><a href="https://www.google.co.in/maps?t=m&amp;q=Vaikunthlal+Mehta+Rd,+Nehru+Nagar,+Airport+Area,+Juhu&amp;ie=UTF8&amp;hq=&amp;hnear=Vaikunthlal+Mehta+Rd,+Nehru+Nagar,+Airport+Area,+Juhu,+Mumbai,+Mumbai+Suburban,+Maharashtra&amp;z=14&amp;ll=19.104093,72.840396&amp;source=embed" style="color:#0000FF;text-align:left">View in Google Map</a></small>
        </div>
</section>

和javascript

function HideAndShowFunc(name)
        {
            if(name=="LOCATION")
           {
                $("#intro3canvas").hide();  
                $("#intro3logo50").hide(); 
                $("#essence-luxury").hide(); 
                $("#displayamenity").hide();
                $("#projlogodiv").hide();
                $("#link").hide();
                $("#intro3Ongoing").hide();
                $("#intro3Upgoing").hide();
                $("#intro3Completed").hide();
                $("#arrow").hide();
                $("#table-frame").hide();               
                $("#intro3bg").hide();
                $("#amenitycanvas").show(); 
                $("#displaylocate").show();
           }
           }

Answer 1

您应该尝试Hand.js。它的指针事件和this article的polyfill可能会帮助您使用Hand.js

指针事件的用法：无;使用HTML CANVAS

1 个答案: