0

Uncaught ReferenceError: mapCenterAt is not defined with the following script というエラーが表示されます。

<script>
jQuery(document).ready(function ($) {

    // Map Markers
    var mapMarkers = [{
        address: "217 Summit Boulevard, Birmingham, AL 35243",
        html: "<strong>Alabama Office</strong><br>217 Summit Boulevard, Birmingham, AL 35243<br><br>
        <a href='#' onclick='mapCenterAt({latitude: 33.44792, longitude: -86.72963, zoom: 16}, event)'>[+] zoom here</a>",
        icon: {
            image: "img/pin.png",
            iconsize: [48, 48],
            iconanchor: [48, 48]
        }
    }];

    // Map Initial Location
    var initLatitude = 37.09024;
    var initLongitude = -95.71289;

    // Map Extended Settings
    var mapSettings = {
        controls: {
            panControl: true,
            zoomControl: true,
            mapTypeControl: true,
            scaleControl: true,
            streetViewControl: true,
            overviewMapControl: true
        },
        scrollwheel: false,
        markers: mapMarkers,
        latitude: initLatitude,
        longitude: initLongitude,
        zoom: 5
    };

    var map = $("#googlemaps").gMap(mapSettings);

    // Map Center At
    var mapCenterAt = function(options, e) {
        e.preventDefault();
        $("#googlemaps").gMap("centerAt", options);
    }
});
</script>

mapCenterAt はスクリプトの下部で定義されていますが、ページで onclick を実行するとエラーがスローされます。onclick で機能するには、mapCenterAt を別の方法で定義する必要がありますか?

4

1 に答える 1

0

jQuery のドキュメント対応ハンドラーは別のスコープを作成するため、mapCenterAtドキュメント対応よりも高いスコープであるグローバル スコープにあるため、インラインの onclick ハンドラーから関数を使用することはできません。

グローバル スコープを使用する必要があります。

window.mapCenterAt = function(options, e) {
    e.preventDefault();
    $("#googlemaps").gMap("centerAt", options);
}

または、適切なイベント ハンドラーを作成します。

<script>
jQuery(document).ready(function ($) {
    // Map Markers
    var mapMarkers = [{
        address: "217 Summit Boulevard, Birmingham, AL 35243",
        html: "<strong>Alabama Office</strong><br>217 Summit Boulevard, Birmingham, AL 35243<br><br><a href='#' id='mapButton'>[+] zoom here</a>",
        icon: {
            image: "img/pin.png",
            iconsize: [48, 48],
            iconanchor: [48, 48]
        }
    }];

    // Map Initial Location
    var initLatitude = 37.09024;
    var initLongitude = -95.71289;

    // Map Extended Settings
    var mapSettings = {
        controls: {
            panControl: true,
            zoomControl: true,
            mapTypeControl: true,
            scaleControl: true,
            streetViewControl: true,
            overviewMapControl: true
        },
        scrollwheel: false,
        markers: mapMarkers,
        latitude: initLatitude,
        longitude: initLongitude,
        zoom: 5
    };

    var map = $("#googlemaps").gMap(mapSettings);

    $(document).on('click', '#mapButton', function(e) {
        e.preventDefault();
        $("#googlemaps").gMap("centerAt", {latitude: 33.44792, longitude: -86.72963, zoom: 16});
    });
});
</script>
于 2013-08-21T18:09:14.170 に答える