Question

我正在为响应式网页设计创建自适应地图，基本上是我在交互式Google地图（完整的Google Map API v3）中加载的非手持式屏幕，而对于手持式屏幕，我会显示静态Google地图图像。它在除IE 8/9之外的所有浏览器中都能正常工作，它在IE中有效，但大部分都不适用于IE 8/9。第一次尝试它将加载然后在几次刷新后或有时第二次刷新它不会显示（它是非常随机的），IE 8比9更差，9通常不会破坏直到大约7-8刷新。但它们都在控制台中输出相同的错误：

SCRIPT438: Object doesn't support property or method 'initialize' 
main.js, line 9 character 238

指的是Google Map API JavaScript文件。

所以这是剥离的功能：

$.fn.adaptiveMap = function() {

// Set variables
var mapContainer = $(this);

// If palm sized screen
if (isPalmSizedScreen) {
    mapContainer.html('<img src="http://maps.google.com/maps/api/staticmap?center=-33.867487,151.20699&zoom=15&markers=-33.867487,151.20699&size=650x405&sensor=false" class="map__static frame">');
}
// If not palm sized screen
else {
    $.getScript('https://maps.googleapis.com/maps/api/js?key=MY-KEY&sensor=false&callback=initialize');

    mapContainer.load('/Cheetah/includes/modules/widgets/google-map3.php');
}

}

然后在文件就绪时我调用函数：

$('.map').adaptiveMap();

以下是AJAX的文件内容：

<div class="map__dynamic frame">
    <div id="map_canvas"></div>
</div>
<script>
function initialize() {
    var myLatlng = new google.maps.LatLng(-33.867487,151.20699);
    var myOptions = {
      zoom: 15,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        animation: google.maps.Animation.DROP
    });
    var contentString = 
        '<div class="infowindow">'+
            '<div>'+
                    '<p class="mrg-off"><strong>SALES OFFICE:</strong><br>1/16 M. 5<br>Tambol Cherngthaley<br>Amphur Thalang<br>Phuket, 83110.<br>See <a href="contact">contact</a> page.</p>'
            '</div>'+
        '</div>'
    ;
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}
</script>

我知道我需要在通过API URL中的callback参数对文件进行AJAX调用之前调用API，我认为IE有一些问题吗？我意识到这可以做得更好，但正如我所说它在所有浏览器中工作正常吧IE。最重要的是我需要确保没有为手持设备屏幕（移动设备）下载任何膨胀的API内容，因为我首先构建了移动设备，目前尚未发生这种情况。

Answer 1

你的问题在这里

$.getScript('https://maps.googleapis.com/maps/api/js?key=MY-KEY&sensor=false&callback=initialize');

mapContainer.load('/Cheetah/includes/modules/widgets/google-map3.php');

google maps api正在调用initialize函数，该函数存在于您通过AJAX检索的google-map3.php文件中。它有时起作用但不起作用的原因是因为.load方法在.getScript之前完成，因此存在initialize函数。一旦浏览器在缓存中有脚本，就会在文件下载之前调用initialize函数。

如果您在AJAX请求之后通过放入在文件下载完成时运行的回调函数来检索脚本，它应该每次都有效。

mapContainer.load('/Cheetah/includes/modules/widgets/google-map3.php', function() {
     $.getScript('https://maps.googleapis.com/maps/api/js?key=MY-KEY&sensor=false&callback=initialize');
});

IE中的Google Map AJAX加载问题

1 个答案: