javascript - 是什么导致 IE8 中的 Google map 错误？

Question

我们正在使用 Google map 并发现了一个问题，该问题似乎只发生在 IE8(可能低于 IE8)中。该功能在 FF、Chrome、IE9 中正常工作。

错误发生的代码是:

google.load("maps", "3.x", { other_params: "sensor=false" });
    var mapdiv = null;
    $(function () {
        mapdiv = document.getElementById("map");
        map = new google.maps.Map( mapdiv, {
            zoom: 1,
            center: new google.maps.LatLng(6, 35),
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        });
        var latlngbounds = new google.maps.LatLngBounds( );

特别是这一行:

map = new google.maps.Map( mapdiv, {
    zoom: 1,
    center: new google.maps.LatLng(6, 35),
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.TERRAIN
});

错误是:

Object doesn't support this property or method

我玩过 IE 开发工具，如果我用 var x = 之类的东西替换 map = 就没有任何错误，所以这让我相信 map 对象是缺少某些属性/方法的罪魁祸首。虽然我真的不知道 map 对象来自哪里，但我假设它是从 google.load 调用中加载的。

有人知道这是怎么回事吗？

Answer 1

当行:

map = new google.maps.Map(mapdiv, { zoom: 1, center: new google.maps.LatLng(6, 35), disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.TERRAIN });

执行后，JavaScript 解释器将开始遍历作用域链，寻找 map 的声明位置。因为它没有在本地声明，即 var map = ...，所以它不会在您的本地范围内找到它，它最终会被添加到全局范围内。

在您的情况下，map 已在全局范围内定义为 window.map，因为它是您页面上 div 的 ID .在您看不到错误消息的所有浏览器中，window.map 都设置为新的 google.maps.Map 对象。出于某种原因，无论好坏，IE8 都不允许您创建名称与引用 DOM 元素的现有全局变量冲突的全局变量。

您可以通过几种不同的方式解决此问题:

1. 创建本地var map
2. 将您的 div 的 id 从 map 更改为其他内容

3. 如果您必须让 map 存在于全局范围内，请使用 window.map =...

   进行设置

   (3b) 将变量名称更改为不与 window.map 冲突的名称，例如myMap = new google.maps.Map(...