0

我正在为响应式网页设计创建自适应地图，基本上是针对我在交互式 Google 地图（完整的 Google 地图 API v3）中加载的非手持屏幕和手持屏幕我显示静态 Google 地图图像。它在除 IE 8/9 之外的所有浏览器中都可以正常工作，它在 IE 中可以正常工作，但大多数情况下不是，例如第一次尝试它会加载，然后在几次刷新或有时第二次刷新后它不会显示（它非常随机），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>

我知道我需要在通过callbackAPI URL 中的参数对文件进行 AJAX 处理之前调用 API，我认为 IE 有这个问题吗？我意识到这可以做得更好，但正如我所说，它在所有浏览器栏 IE 中都可以正常工作。主要的是我需要确保没有为手持屏幕（移动设备）下载任何臃肿的 API 内容，因为我首先构建移动设备，目前这没有发生。

4

1 回答 1

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

谷歌地图 api 正在调用您通过 AJAX 检索initialize的文件中存在的函数。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');
});
于 2013-02-07T07:52:20.827 回答