2012-08-13 47 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