Question

我有一个htm文件，使用Google Maps API（针对测试用例进行了简化）显示了该针脚周围的1个针脚和1个热图。

此文件在Safari 9.0.2，Chrome 47.0.2526.106和Firefox 42.0上始终正确打开（请参阅图钉和热图） - 所有这些都在Mac OS Air上运行的Mac OS X 10.9.5上（2014年初），8GB内存/ 1.7 GHz i7。

但是，它在Internet Explorer 11下无法一致打开。具体来说，地图图钉将显示，单击图钉时信息窗口将打开，但热图不会显示。

在Windows 8.1（Mac上的Parallels VM）上运行的IE 11.0.9600.18125上，我注意到IE在文档模式7而不是“Edge”下打开了下面的代码。我检查了工具下的“兼容性视图设置”，并注意到“在兼容性视图中显示Intranet站点”已被选中。当我取消选中此框并重新加载htm文件时，热图会正确显示。

问题1：下面的代码中是否有任何内容会导致IE 11认为这是一个docmode 7文件？

在运行IE 11的两台Dell Latitude PC上：热图在一台PC上正确显示，但不在另一台PC上显示热图 - 使用AND而不在“兼容性视图中显示Intranet站点”复选框打开/关闭。在所有情况下，两台PC上的Docmode都被正确读作“Edge”。所以现在我想知道上述内容是否与在Parallels中的VM中运行IE有关。

我搜索了SO并遇到了类似的问题，这些问题似乎与在热图显示之前未完成的AJAX数据调用的时间有关：google maps v3 heatmap not displaying on page load.

以下是htm文件中的代码：

<!DOCTYPE html>
<html>

    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta charset="utf-8">
            <style type="text/css">
                html {
                    height: 100%;
                    font-size: small
                }

            body {
                height: 100%;
                margin: 0px;
                padding: 0px
            }

            #map_canvas {
                min-height: 100%;
                height: auto;
            }

            #cBoxes {
                position: absolute;
                right: 5px;
                top: 50px;
                background: white
            }
            </style>
            <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization">
                </script>
            <script language="javascript">
                var marker
                var map
                var markersdataSpDf7735 = [];
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(42.475989, -71.409459),
                    map: map,
                    title: "Name: A\rBurgersSold: 100",
                    clickable: true,
                    draggable: false,
                    flat: true,
                    visible: true,
                    zIndex: null
                    });
            markersdataSpDf7735.push(marker);

            var markersdataSpDf5372Data = [{
                location: new google.maps.LatLng(42.475989, -71.409459),
                weight: 100
                }];

            var markersdataSpDf5372 = new google.maps.visualization.HeatmapLayer({
                data: markersdataSpDf5372Data,
                dissipating: false,
                radius: 0.5
                });

            function showO(MLPArray, boxname, map) {
                for (var i = 0; i < MLPArray.length; i++) {
                    MLPArray[i].setMap(map);
                }
                document.getElementById(boxname).checked = true;
            }

            function hideO(MLPArray, boxname) {
                for (var i = 0; i < MLPArray.length; i++) {
                    MLPArray[i].setMap(null);
                }
                document.getElementById(boxname).checked = false;
            }

            function boxclick(box, MLPArray, boxname, map) {
                if (box.checked) {
                    showO(MLPArray, boxname, map);
                } else {
                    hideO(MLPArray, boxname);
                }
            }

            function showHeatmap(MLPArray, boxname, map) {
                MLPArray.setMap(map);
                document.getElementById(boxname).checked = true;
            }

            function hideHeatmap(MLPArray, boxname) {
                MLPArray.setMap(null);
                document.getElementById(boxname).checked = false;
            }

            function boxclickHeatmap(box, MLPArray, boxname, map) {
                if (box.checked) {
                    showHeatmap(MLPArray, boxname, map);
                } else {
                    hideHeatmap(MLPArray, boxname);
                }
            }

            function initialize() {
                var latlng = new google.maps.LatLng(42.475989, -71.409459);

                var myOptions = {
                    zoom: 15,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.HYBRID,
                    disableDefaultUI: false,
                    disableDoubleClickZoom: false,
                    draggable: true,
                    keyboardShortcuts: true,
                    mapTypeControlOptions: {
                        style: google.maps.MapTypeControlStyle.DEFAULT
                    },
                    navigationControl: true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.DEFAULT
                    },
                    noClear: false,
                    scaleControl: true,
                    scaleControlOptions: {
                        style: google.maps.ScaleControlStyle.STANDARD
                    },
                    scrollwheel: true,
                    streetViewControl: false
                };

                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                map.fitBounds(new google.maps.LatLngBounds(
                    new google.maps.LatLng(42.475989, -71.409459),
                    new google.maps.LatLng(42.475989, -71.409459)));

                var infowindow = new google.maps.InfoWindow({
                    content: '',
                    disableAutoPan: false,
                    maxWidth: 330,
                    pixelOffset: null
                    });

                google.maps.event.addListener(markersdataSpDf7735[0], 'click', function(event) {
                    infowindow.setContent('Name: A <br>BurgersSold: 100');
                    infowindow.setPosition(event.latLng);
                    infowindow.open(map, markersdataSpDf7735[0])
                });

                showO(markersdataSpDf7735, "markersdataSpDf7735box", map);
                showHeatmap(markersdataSpDf5372, "markersdataSpDf5372box", map);

            }
            </script>
    </head>

    <body onload="initialize()">
        <div id="map_canvas"></div>


        <div id="cBoxes">
            <table>
                <tr>
                    <td>
                        <input type="checkbox" id="markersdataSpDf7735box" onClick='boxclick(this,markersdataSpDf7735,"markersdataSpDf7735box",map);' /> <b>Drop Pins</b> </td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>
                        <input type="checkbox" id="markersdataSpDf5372box" onClick='boxclickHeatmap(this,markersdataSpDf5372,"markersdataSpDf5372box",map);' /> <b>Heatmap</b> </td>
                </tr>
            </table>
        </div>
    </body>

</html>

以下是您应该看到的内容：

问题2：html / javascript代码有任何明显的问题吗？

令人抓狂的是，它可以在一台笔记本电脑上使用IE而不是另一台笔记本电脑。两者都是配置相同的企业笔记本电脑。在两台笔记本电脑上，htm文件在Chrome中正确打开。可能需要设置的任何IE设置？

感谢关于在哪里寻找的任何指示。

Google Heatmap在Internet Explorer中不一致显示

0 个答案: