Google地图导航控件在IE11中失真/扭动 [英] Google Maps navigation controls distorted/wiggling in IE11
问题描述
这个问题与我在此问过的另一个问题有很大关系： Internet Maps Quirks模式中的Google Maps API v3.19已损坏。在尝试找到针对该问题的修复程序时， Pointy 建议进行更改，这为我提供了可用的地图，但该建议提出了另一个问题使用左上角的Google地图导航控件。当我在IE11中拖动地图时，导航控制摆动并且看起来很奇怪。这个问题也发生在之前的（冻结的）谷歌地图版本3.18上，因此似乎是另一个问题，而不是我提到的另一个问题，因此我在这个问题中提出了这个问题。
This question is loosely related to another I've asked here: Google Maps API v3.19 Broken in Internet Explorer Quirks Mode. While trying to find a fix for that issue Pointy suggested a change which gave me a usable map, however the suggestion raised another issue with the Google Maps navigation controls in the top left. As I drag the map in IE11 the navigation controls 'wiggle' around and look quite odd. The issue also happens with the previous (frozen) Google Maps release 3.18 and so appears to be another concern, rather than the one referred to my other question, hence the reason I've raised this issue in a question of it's own.
此页面演示了IE11中的问题。 Chrome和Firefox工作正常：
This page demos the problem in IE11. Chrome and Firefox work fine:
<!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中很明显。有谁知道如何克服这个显示问题？
I haven't been able to test this in any other version of Internet Explorer but the problem is very evident in IE11. Does anyone know how to overcome this display issue?
推荐答案
我在一段时间后也遇到过这个问题，经过各种论坛的狩猎后发现以下样式更改解决了这个问题，至少在我的情况下：
I also encountered this problem some time back and after much hunting around on various forums found the following style changes addresses the issue, at least in my case anyway:
<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>
尝试一下，看看是否有帮助，我希望它能做到，我现在已经太好了这引起了很大的痛苦，并且花费了大量时间来寻找可行的解决方案！
Give that a try and see if it helps, I hope it does, I now only too well how much pain this caused and time spent to find a working solution!
这篇关于Google地图导航控件在IE11中失真/扭动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
