leaflet.js:6 Uncaught TypeError: Cannot read property 'lat' of null

Question

i develop example web page that view open street map and read data from sql server database by Json (javascript)

and let me this error
the function return data successfully from database 的该函数成功从数据库返回了数据

here return data by json

        [HttpPost]
    public JsonResult GetMap()
    {
        var data1 = (from p in db.Map
                     select new
                     {
                         Name = p.Name,
                         Latitude = p.Latitude,
                         Logitude = p.Logitude,
                         Location = p.Location,
                         Description = p.Description,
                         Id = p.Id
                     }).ToList().Select(res => new Map
                {
                    Name = res.Name,
                    Latitude = res.Latitude,
                    Logitude = res.Logitude,
                    Location = res.Location,
                    Description = res.Description,
                    Id = res.Id


                });
        return Json(data1, JsonRequestBehavior.AllowGet);

    }

here get data from json function and get data successfully 从json函数获取数据并成功获取数据

 <body>
<div id="mapid" style="height:600px"></div>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {

    var map = L.map('mapid').setView([31.291340, 34.244190], 13);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);




        $.ajax({
            type: "POST",
            url: '/Maps/GetMap',
            success: function (data) {
                //var result = JSON.stringify(data);
                var result = data;
                for (var i = 0; i < data.length; ++i) {

                    var popup =
                        '<b>Name:</b> ' + data[i].Name
                        +
                     '<br/><b>Latitude:</b> ' + data[i].Latitude +
                       '<br/><b>Longitude:</b> ' + data[i].Logitude +
                    '<br/><b>Location:</b> ' + data[i].Location
                    ;

                    alert(data[i].Name + " " + data[i].Latitude + " / " + data[i].Logitude + " / " + data[i].Location);
                    L.marker(data[i].Logitude,  [data[i].Latitude])

                        .bindPopup(popup)
                       .addTo(map); 

                }

            },
            error: function (xhr) {

                console.log(xhr.responseText);
                alert("Error has occurred..");
            }
        });
    });

</script>

Answer 1

Actually it is a linq query and those are deferred execution which means it only gets executed when we are just going to consume it, so you are just passing the IQueryable object to JSON method and the time it returns back it is not materialized with result.

You need to materialize the result using ToList() method when passing to JSON method.

Just change your last line to:

return Json(data1.ToList(), JsonRequestBehavior.AllowGet);

Now the EF will execute the query on the database server and will fetch the result and populate in the List<T> object.

Hope it helps!

leaflet.js:6 Uncaught TypeError: Cannot read property 'lat' of null

Question

1 answers

solution1
0 2017-09-29 09:31:16

leaflet.js:6 Uncaught TypeError: Cannot read property 'lat' of null

Question

1 answers

solution1 0 2017-09-29 09:31:16

solution1
0 2017-09-29 09:31:16