javascript - Uncaught TypeError: Cannot read property 'lat' of undefined when serializing leaflet data with $.pa

admin管理员组

文章数量:1317898

I'd like to preface this: I'm very new to JavaScript. I am trying to post user location and map bounds with Leaflet and an AJAX call. In my event handler stateUpdater.onLocationFound the log statements print out the correct user coordinates and map bounds, however I get Uncaught TypeError: Cannot read property 'lat' of undefined when trying to serialize these values with $.param(). I am using Leaflet v0.7.2 and jQuery 1.11.0.

var map;

$(document).ready(function() {
    map = new L.map('map').setView([41.52, -71.09], 11);
    L.tileLayer('http://{s}.tile.openstreetmap/{z}/{x}/{y}.png', {
        maxZoom: 18
    }).addTo(map);
    map.on('locationfound', stateUpdater.onLocationFound);

    stateUpdater.poll();
});

var stateUpdater = {
    errorSleepTime: 10000,

    poll: function() {
        map.locate({setView: true, maxZoom: 18});
    },

    onLocationFound: function(e) {
        //This log statement produces the correct output
        console.log(e.latlng.toString());
        var bounds = map.getBounds();
        //As does this one
        console.log(bounds.toBBoxString())
        var args = {
            "map_ne": bounds.getNorthEast(),
            "map_sw": bounds.getSouthWest(),
            "user_coords": e.latLng
        };
        //Uncaught TypeError thrown here
        $.ajax({url: "/a/state/updates", type: "POST", dataType: "text",
            data: $.param(args),
            success: stateUpdater.onSuccess,
            error: stateUpdater.onError});
    },

    onSuccess: function(response) {
        console.log(response);
        stateUpdater.errorSleepTime = 10000;
        window.setTimeout(stateUpdater.poll, 10000);
    },

    onError: function(response) {
        stateUpdater.errorSleepTime *= 2;
        console.log("Poll error; sleeping for", stateUpdater.errorSleepTime, "ms");
        window.setTimeout(stateUpdater.poll, stateUpdater.errorSleepTime);
    },
};

I have no hunches anymore as to what may be causing this, so I would greatly appreciate help.

I'd like to preface this: I'm very new to JavaScript. I am trying to post user location and map bounds with Leaflet and an AJAX call. In my event handler stateUpdater.onLocationFound the log statements print out the correct user coordinates and map bounds, however I get Uncaught TypeError: Cannot read property 'lat' of undefined when trying to serialize these values with $.param(). I am using Leaflet v0.7.2 and jQuery 1.11.0.

var map;

$(document).ready(function() {
    map = new L.map('map').setView([41.52, -71.09], 11);
    L.tileLayer('http://{s}.tile.openstreetmap/{z}/{x}/{y}.png', {
        maxZoom: 18
    }).addTo(map);
    map.on('locationfound', stateUpdater.onLocationFound);

    stateUpdater.poll();
});

var stateUpdater = {
    errorSleepTime: 10000,

    poll: function() {
        map.locate({setView: true, maxZoom: 18});
    },

    onLocationFound: function(e) {
        //This log statement produces the correct output
        console.log(e.latlng.toString());
        var bounds = map.getBounds();
        //As does this one
        console.log(bounds.toBBoxString())
        var args = {
            "map_ne": bounds.getNorthEast(),
            "map_sw": bounds.getSouthWest(),
            "user_coords": e.latLng
        };
        //Uncaught TypeError thrown here
        $.ajax({url: "/a/state/updates", type: "POST", dataType: "text",
            data: $.param(args),
            success: stateUpdater.onSuccess,
            error: stateUpdater.onError});
    },

    onSuccess: function(response) {
        console.log(response);
        stateUpdater.errorSleepTime = 10000;
        window.setTimeout(stateUpdater.poll, 10000);
    },

    onError: function(response) {
        stateUpdater.errorSleepTime *= 2;
        console.log("Poll error; sleeping for", stateUpdater.errorSleepTime, "ms");
        window.setTimeout(stateUpdater.poll, stateUpdater.errorSleepTime);
    },
};

I have no hunches anymore as to what may be causing this, so I would greatly appreciate help.

• javascript
• jquery
• ajax
• leaflet

Share Improve this question Follow edited Mar 11, 2014 at 20:14 zs3404635 asked Mar 11, 2014 at 6:02 zs3404635zs3404635 11311 gold badge11 silver badge77 bronze badges 1

• Please see that your js files are loaded in proper order. – Sagar Bhosale Commented Jun 16, 2014 at 12:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

It seems like bounds.getNorthEast(), bounds.getSouthWest() and e.latlng return objects that contains some functions in addition to lat,lng coordinates, like equal() and toString() which prevents $.param() from performing serialization of your data correctly and this causes your error, here is a good way to get only what you need from those objects:

    var ll= $.extend({},{lat:e.latlng.lat, lng:e.latlng.lng}), 
        neBounds = bounds.getNorthEast(), 
        neBoundsLl = $.extend({},{lat:neBounds.lat, lng:neBounds.lng}),
        swBounds = bounds.getSouthWest(), 
        swBoundsLl = $.extend({},{lat:swBounds.lat, lng:swBounds.lng}),
        args = {
        "map_ne": neBoundsLl,
        "map_sw": swBoundsLl,
        "user_coords": ll
    };

I tested this code and it worked for me,the error disappeared and the ajax request was sended successfully.

本文标签：