IE8的Google Maps API问题

Question

I'm writing some code with the Google Maps API, it works fine in all browsers (FF, IE9, Chrome) but IE8 or below, I have assigned the map to a global variable called Map, which gets populated but when the addMarker function gets called the Map global is null in IE8, but the addMarker function does work when I call it from the locator function, I have included all these functions below.

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);
        }
    });
};

Below is how I am calling the functions:

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') });

Thanks for any help.

Answer 1

我解决了这样的问题。

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

Answer 2

Try changing this line in your setup

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

to just

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

This way you accessing the global variable declared.

Answer 3

when is GoogleMaps.setup called? Right now it looks like depending on the browser it can be called after functions attached by

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

and that's why map is not set when you call addMarker, but is already initialized when you receive callback from

Geocoder.geocode(...)

To fix this make sure that GoogleMaps.setup is called before addMarker.

Answer 4

IE8 has always meant trouble. :-) Try adding the following meta tag at the beginning of your <head> section:

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

Description here:

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