-1

この質問を見て、すべて正常に機能するコード設定を確認してください。

これとまったく同じアダプティブマップソリューションを使用する不動産サイトで作業していますが、サイトにマップを必要とするページ（プロパティ詳細ページ）が多数あるため、各プロパティ詳細内に緯度/経度座標を埋め込む方法が必要です。ページを作成し、外部initialize()スクリプトにそれを取得させますが、これを機能させることができません。

スクリプトに2 lat/ longvarを追加しました：initialize()

function initialize(lat, long) {
    var myLatlng = new google.maps.LatLng(lat, long);

次に、マップが必要なページでこれを試しました。

<script>
    window.onload = function() {
        if (typeof(map) != 'undefined') {
             initialize(-33.867487,151.20699);
        }
    }
</script>

ただし、座標は取得されません。 ここに画像の説明を入力してください

これは、すべてがどのように読み込まれるかに関連していると確信しています。つまり、initialize()スクリプトがjQueryを介してAJAXされload()、それが読み込まれると、Maps APIがjQueryを介して読み込まれ$.getScript、これはすべてで発生し$(window).loadます。緯度/経度の座標がこの設定とどのように結びつくかについて、私はただ立ち往生していますか？

- 編集 -

コードの設定をできるだけ簡単に分解します。

外部のグローバルJSファイルには、 InquireJSライブラリを使用するアダプティブGoogleマップソリューションをセットアップするためのファイルがあります。

$(window).load(function() {

    var mapContainer = $('.map'),
    mapStaticContainer = $('.map__static'),
    mapDynamicContainer = $('<div class="map__dynamic"/>');

    /* --Enquire library-- */
    enquire.register(BPlap, {

        deferSetup: true,

        setup: function() {
            mapContainer.prepend(mapDynamicContainer);
            mapDynamicContainer.html('<span class="preloader"><span class="preloader__spinner"></span> <em>Loading map&#8230;</em></span>').load('/includes/modules/adaptive-google-map/js.php', function() {
                $.getScript('http://maps.google.com/maps/api/js?sensor=false&callback=initialize', function(){});
            });
        },

        // Not palm size viewport
        match: function() {
            mapStaticContainer.hide();
            mapDynamicContainer.show();
            // Need this so the map fully renders when going from `match` -> `unmatch` -> `match`
            if (typeof(map) != 'undefined') {
                var center = map.getCenter();
                google.maps.event.trigger(map, 'resize');
                map.setCenter(center);
            }
        },

        // Palm size viewport
        unmatch: function() {   
            mapStaticContainer.show();
            mapDynamicContainer.hide();
        }

    }, true).listen();

});

jQueryを介してAJAXされたファイルの内容load()：/includes/modules/adaptive-google-map/js.php：

<div id="map_canvas"></div>
<script>
//function initialize() {
function initialize(lat, long) {
    var myLatlng = new google.maps.LatLng(lat, long);
    //var myLatlng = new google.maps.LatLng(-33.867487, 151.20699);
    var myOptions = {
      zoom: 15,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false
    }
    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
    });
    // Center Google Maps on browser resize (https://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive)
    var center;
    function calculateCenter() {
        center = map.getCenter();
    }
    google.maps.event.addDomListener(map, 'idle', function() {
        calculateCenter();
    });
    google.maps.event.addDomListener(window, 'resize', function() {
        map.setCenter(center);
    });
}
</script>

上記のスクリプト（コメント行）で緯度/経度の座標をハードコーディングすると、すべてが正常に機能します。ページ内から/ varinitialize()を渡そうとすると、マップが挿入され、実行できなくなります。latlong

4

1 に答える 1

0

私はそれを理解しました、私はここから変数を削除する必要がありました:

function initialize(lat, long) {

だからそれはちょうどこれでした：

function initialize() {
    var myLatlng = new google.maps.LatLng(lat, long);

次に、マップが使用されていたページにこのインライン JS を配置します。

<script>
var lat     = 53.43072,
    long    = -3.049134;
</script>
于 2013-03-20T03:41:07.070 に答える