2012-08-13 54 views
1

我正在編寫一些代碼與谷歌地圖API,它在所有瀏覽器(FF,IE9,Chrome)但IE8或以下,罰款工作正常,我已分配映射到一個全局變量稱爲映射,它被填充,但是當addMarker函數被調用時,IE8中的Map全局爲空,但是當我從定位器函數調用addMarker函數時,addMarker函數仍然有效,下面我已經包含了所有這些函數。Google地圖API問題與IE8

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

感謝您的幫助。

+0

設置你的'map'變量的東西在默認情況下,不只是一個:改變設置或B:宣佈一個新的實例。 – 2012-08-13 12:43:17

+0

@EricRobinson如果我創建了一個新的地圖實例,它只是在另一個地圖上放置一個新地圖。給地圖一個默認值會拋出一大堆錯誤,說它不是地圖的有效屬性,當我運行setup函數時,它應該改變map的設置,這是第一個被調用的函數,它會執行但是那麼當addMarker函數嘗試使用Map時,它是空的。 – user1587834 2012-08-13 13:13:44

回答

0

嘗試在你的設置修改這一行

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

只是

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

您訪問的全局變量這樣聲明。

+0

我已經嘗試過,但不幸的是它沒有改變。 – user1587834 2012-08-13 13:31:14

+0

嗯嘗試刪除=空;在'Map'的聲明中。我真的不知道爲什麼這不適用於IE瀏覽器。 – 2012-08-13 14:06:27

0

什麼時候被GoogleMaps.setup調用?現在它看起來像取決於瀏覽器,它可以通過

連接功能後調用,這就是爲什麼當你調用addMarker地圖沒有設置,但是當你從

Geocoder.geocode(...) 
接收回已初始化

要解決此問題,請確保在addMarker之前調用GoogleMaps.setup。

-3

IE8總是意味着麻煩。 :-)試着在你<head>節的開頭加入以下meta標籤

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

說明這裏:

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

+1

什麼?他會想模仿一個更糟糕的瀏覽器嗎? – Kloar 2013-05-23 17:14:43

+0

@Kloar:是的,它似乎是這樣(即使在'14):http://apitricks.blogspot.ro/2009/08/curing-ie8-complications.html – 2014-06-13 07:53:51

2

我解決了這個問題是這樣的。

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

+1

請包括一些信息,爲什麼這解決了這個問題。 – krillgar 2014-11-20 19:17:19