Google IE11 中的地图导航控件 distorted/wiggling

Question

这个问题与我在这里问过的另一个问题松散相关：. While trying to find a fix for that issue Pointy 建议进行更改，这给了我一张可用的地图，但是该建议引发了 Google 中的地图导航控件的另一个问题左上角。当我在 IE11 中拖动地图时，导航控件 'wiggle' 左右移动，看起来很奇怪。这个问题也发生在之前的（冻结的）Google Maps 版本 3.18 中，因此似乎是另一个问题，而不是提到我的其他问题的问题，因此我在一个问题中提出这个问题的原因是自己的。

此页面演示了 IE11 中的问题。 Chrome 和 Firefox 工作正常：

<!DOCTYPE html>
<head>
    <title>Google Maps Test Page</title>
</head>
<body style="margin:0; padding:0">
    <script src='http://maps.googleapis.com/maps/api/js?v=3.18' type='text/javascript'></script>
    <script type='text/javascript'>
    function initialize() {
            top.google.maps.visualRefresh=true;
            var mapOptions = {
                zoom: 13,
                center: new google.maps.LatLng(51.5072, 0.1275),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scaleControl: true,
                overviewMapControl: true
            };
            this._map = new google.maps.Map(document.getElementById('myMap'), mapOptions);  
        }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="myMap" style="width:500px;height:500px;position:relative;"></div>
</body>
</html>

我无法在任何其他版本的 Internet Explorer 中对此进行测试，但问题在 IE11 中非常明显。有谁知道如何解决这个显示问题？

Answer 1

前段时间我也遇到过这个问题，在各种论坛上进行了大量搜索后发现以下样式更改解决了这个问题，至少在我的情况下是这样：

<script>
    var doc = document.documentElement;
    doc.setAttribute('data-useragent', navigator.userAgent);
</script>
<style type="text/css">
html[data-useragent*='Trident/7.0'] div[title^="Zoom"]
 {
        opacity: 0 !important;
 }
 html[data-useragent*='Trident/7.0'] div[title^="Pan"]
 {
        opacity: 0 !important;
 }
</style>

尝试一下，看看它是否有帮助，我希望它有帮助，我现在非常清楚这造成了多少痛苦，花了多少时间来找到一个可行的解决方案！

Google IE11 中的地图导航控件 distorted/wiggling

Google Maps navigation controls distorted/wiggling in IE11

javascript

internet-explorer

google-maps