是什么导致IE8中的Google Maps错误？

Question

我们正在使用谷歌地图,并确定了一个似乎只在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不支持此属性或方法

我已经对IE开发工具进行了一些游戏,如果我map =用类似的东西替换var x =没有任何错误,那么这让我相信该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的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(...