0

レスポンシブウェブデザイン用のアダプティブマップを作成しています。基本的には、インタラクティブなGoogleマップ（完全なGoogle Map API v3）にロードする非ハンドヘルド画面用で、ハンドヘルド画面用に静的なGoogleマップ画像を表示します。IE 8/9を除くすべてのブラウザで正常に動作し、IEでも動作しますが、ほとんどの場合、最初にロードを試みてから、数回の更新後、または2回目の更新後に表示されない（非常にランダムです）、IE 8 9よりも悪い場合、9は通常、約7〜8回更新されるまで壊れません。ただし、どちらもコンソールに同じエラーを出力します。

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

これは、Google MapAPIJavaScriptファイルを参照しています。

だからここにストリップバック関数があります：

$.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のパラメーターを介してファイルをAJAXする前に、APIを呼び出す必要があることはわかっていcallbackますが、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 に答える