Question

我正在使用Google Maps API编写一些代码，它适用于所有浏览器（FF，IE9，Chrome）但IE8或更低版本，我已将地图分配给名为Map的全局变量，该变量将被填充，但是在IE8中调用addMarker函数时，Map global为null，但是当我从定位器函数调用它时，addMarker函数确实有效，我在下面包含了所有这些函数。

var GoogleMaps = {};
var Map = null;
var init = (function () {
"use strict";

var MapType = null;
var ZoomLevel = null;
var ControlPos = null;
var ControlSize = null;
var myLatLong = null;

var Geocoder;
var result = null;

GoogleMaps.setup = function (options) {

    myLatLong = new google.maps.LatLng(24.886436490787712, -70.26855468754);

    if (google.loader.ClientLocation) {
        myLatLong = new google.maps.LatLng(
            google.loader.ClientLocation.latitude,
            google.loader.ClientLocation.longitude);
    } else if (options.Lat !== null && options.Long !== null) {
        options.Location = new google.maps.LatLng(options.Lat, options.Long);
    } else {
        // Else centre to UK
        options.Location = new google.maps.LatLng(52.961875, -1.419433);
    }

    if (options.MapType.toUpperCase() === 'ROADMAP') {
        MapType = google.maps.MapTypeId.ROADMAP;
    } else if (options.MapType.toUpperCase() === 'TERRAIN') {
        MapType = google.maps.MapTypeId.TERRAIN;
    } else if (options.MapType.toUpperCase() === 'HYBRID') {
        MapType = google.maps.MapTypeId.HYBRID;
    } else {
        MapType = google.maps.MapTypeId.SATELLITE;
    }

    // Check zoom level, if not set then set to zoom level 8.
    if (options.ZoomLevel) {
        ZoomLevel = options.ZoomLevel;
    } else {
        ZoomLevel = 8;
    }

    var mapOptions = {
        center: myLatLong,
        zoom: ZoomLevel,
        mapTypeId: MapType
    };

    var mapDiv = document.getElementById('canvas');
    // Map gets initiated here 
    window.Map = new google.maps.Map(mapDiv, mapOptions);

    delete options.MapType;
    delete options.Lat;
    delete options.Long;
    delete options.ZoomLevel;
};

GoogleMaps.addMarker = function (options) {
    var Location = null;
    var Animation = null;
    var Title = null;
    var Draggable = null;
    var Content = null;
    var InfoWindow = null;
    var Flat = null;
    var Clickable = null;

    if (options.lat !== null && options.long !== null) {
        Location = new google.maps.LatLng(options.lat, options.long);
        ;
    } else {
        Location = myLatLong;
    }

    if (typeof(options.position) !== "undefined") {
        Location = options.position;   
    }

    if (options.animation.toUpperCase() === 'BOUNCE') {
        Animation = google.maps.Animation.BOUNCE;
    } else if (options.animation.toUpperCase() === 'DROP') {
        Animation = google.maps.Animation.DROP;
    } else {
        Animation = google.maps.Animation.NONE;
    }

    if (options.draggable !== null && options.draggable === 'true') {
        Draggable = true;
    } else {
        Draggable = false;
    }

    if (options.title !== null) {
        Title = options.title;
    } else {
        Title = null;
    }

    if (options.content !== null) {
        Content = options.content;
        InfoWindow = new google.maps.InfoWindow({
            content: Content
        });
    }

    if (options.flat !== null && options.flat === 'true') {
        Flat = true;
    } else {
        Flat = false;
    }

    if (options.clickable !== null && options.clickable === 'true') {
        Clickable = true;
    } else {
        Clickable = false;
    }

        // Gets used in this section
        var Marker = new google.maps.Marker({
        position: Location,
        map: window.Map,
        animation: Animation,
        draggable: Draggable,
        title: Title,
        flat: Flat,
        clickable: Clickable,
        zIndex: 1
    });
    // and sets map here
    Marker.setMap(window.Map);
    if (options.content !== null) {
        google.maps.event.addListener(Marker, 'click', function (e) {
            InfoWindow.open(window.Map, this);
            google.maps.event.addListener(window.Map, 'click', function (e) {
                InfoWindow.close(window.Map, window.Marker);
            });
        });
    }
    google.maps.event.addListener(Marker, 'dragend', function (e) {
    });

    delete options.lat;
    delete options.long;
    delete options.animation;
    delete options.title;
    delete options.content;
    delete options.flat;
    delete options.draggable;
    delete options.clickable;
};

GoogleMaps.Locator = function (result) {
    var address = null;
    Geocoder = new google.maps.Geocoder();
    address = result;
    Geocoder.geocode({ 'address': address }, function (response, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            window.Map.setCenter(response[0].geometry.location);
            var Location = new google.maps.LatLng(response[0].geometry.location.Xa, response[0].geometry.location.Ya);
            var markerOptions = {
                animation: "drop",
                draggable: "true",
                content: 'Hello World!',
                title: "Hello",
                position: Location
            };
            GoogleMaps.addMarker(markerOptions);
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
};

以下是我调用函数的方法：

var markerOptions = {
        lat: 52.48278,
        long: -0.892089,
        animation: "drop",
        draggable: "true",
        content: 'Hello World!',
        title: "Click Me"
    };
 google.maps.event.addDomListener(window, 'load', function () { GoogleMaps.setMarker(markerOptions) });

 google.maps.event.addDomListener(window, 'load', function () { GoogleMaps.Locator('London') });

感谢您的帮助。

Answer 1

我解决了这个问题。

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7; IE=EmulateIE9″/>

Answer 2

尝试在设置中更改此行

window.Map = new google.maps.Map(mapDiv, mapOptions);

到

Map = new google.maps.Map(mapDiv, mapOptions);

这样就可以访问声明的全局变量。

Answer 3

什么时候调用GoogleMaps.setup？现在看来它取决于浏览器，它可以在

附加的功能之后调用

 google.maps.event.addDomListener(window, 'load', function () { ... });

这就是为什么在调用addMarker时没有设置map，但是当你从

接收回调时已经初始化了

Geocoder.geocode(...)

要解决此问题，请确保在addMarker之前调用GoogleMaps.setup。

Answer 4

IE8总是意味着麻烦。 :-)尝试在<head>部分的开头添加以下元标记：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

此处的说明：

http://blogs.msdn.com/b/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx

IE8的Google Maps API问题

4 个答案: