javascript - Invalid LatLng object with Leaflet map - Stack Overflow

admin管理员组

文章数量:1329341

I am pletely stuck on solving a weird map error while using Leaflet.js and Cloudmade in an Angular and Rails app. The maps work on almost every map except for a few maps on staging (works fine for development) where I'm getting: Uncaught Error: Invalid LatLng object which it says is undefined. I'm getting the lat and long from a JSON and I've verified the lat and long are present in the JSON and that same lat/long is working for similar maps. In the Leaflet source code, it says the error is given when the lat/long are Not-A-Number but I'm confused how the lat/long are not numbers when they are in my json. Here's the stack trace I'm getting in Chrome:

Uncaught Error: Invalid LatLng object: (undefined, undefined)
n.LatLng 
n.latLng 
n.Map.n.Class.extend.project 
n.Map.n.Class.extend._getNewTopLeftPoint 
n.Map.n.Class.extend._resetView 
n.Map.include.setView 
(anonymous function) 
jQuery.event.dispatch 
elemData.handle.eventHandle 
jQuery.event.trigger 
(anonymous function) 
jQuery.extend.each
jQuery.fn.jQuery.each 
jQuery.fn.extend.trigger 
(anonymous function) 
next 
Tab.activate 
Tab.show 
(anonymous function) 
jQuery.extend.each 
jQuery.fn.jQuery.each 
$.fn.tab 
(anonymous function) 
jQuery.event.dispatch
elemData.handle.eventHandle

A little bit of the code here:

var map = L.map('map').setView([$scope.lat, $scope.long], 11);
L.tileLayer('http://{s}.tile.cloudmade/API-key/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="">OpenStreetMap</a> contributors, <a href=".0/">CC-BY-SA</a>, Imagery © <a href="">CloudMade</a>',
    maxZoom: 18
}).addTo(map);

The link is replaced with my API key of course. I'm using the latest stable version of Leaflet which contains this code fixthat was the best Google search result I could find. My map is inside a tabbed content used from Bootstrap. What problems could there be here? Or what would I do to debug this? Any help would be greatly appreciated and I'm happy to provide more details if needed.

I am pletely stuck on solving a weird map error while using Leaflet.js and Cloudmade in an Angular and Rails app. The maps work on almost every map except for a few maps on staging (works fine for development) where I'm getting: Uncaught Error: Invalid LatLng object which it says is undefined. I'm getting the lat and long from a JSON and I've verified the lat and long are present in the JSON and that same lat/long is working for similar maps. In the Leaflet source code, it says the error is given when the lat/long are Not-A-Number but I'm confused how the lat/long are not numbers when they are in my json. Here's the stack trace I'm getting in Chrome:

Uncaught Error: Invalid LatLng object: (undefined, undefined)
n.LatLng 
n.latLng 
n.Map.n.Class.extend.project 
n.Map.n.Class.extend._getNewTopLeftPoint 
n.Map.n.Class.extend._resetView 
n.Map.include.setView 
(anonymous function) 
jQuery.event.dispatch 
elemData.handle.eventHandle 
jQuery.event.trigger 
(anonymous function) 
jQuery.extend.each
jQuery.fn.jQuery.each 
jQuery.fn.extend.trigger 
(anonymous function) 
next 
Tab.activate 
Tab.show 
(anonymous function) 
jQuery.extend.each 
jQuery.fn.jQuery.each 
$.fn.tab 
(anonymous function) 
jQuery.event.dispatch
elemData.handle.eventHandle

A little bit of the code here:

var map = L.map('map').setView([$scope.lat, $scope.long], 11);
L.tileLayer('http://{s}.tile.cloudmade./API-key/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap">OpenStreetMap</a> contributors, <a href="http://creativemons/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.">CloudMade</a>',
    maxZoom: 18
}).addTo(map);

The link is replaced with my API key of course. I'm using the latest stable version of Leaflet which contains this code fixthat was the best Google search result I could find. My map is inside a tabbed content used from Bootstrap. What problems could there be here? Or what would I do to debug this? Any help would be greatly appreciated and I'm happy to provide more details if needed.

• javascript
• angularjs
• leaflet

Share Improve this question Follow asked Jun 18, 2013 at 1:00 AshleyAshley 21111 gold badge33 silver badges1010 bronze badges 1

• 2 Try to remplace [$scope.lat, $scope.long] by [51.505, -0.09] to see what happens. – L. Sanna Commented Jun 18, 2013 at 17:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Not sure if you got this working, but I had a similar issue with the lat/lng being strings such as "53.12345", "-1.6789". If this is the case, either change the data returned in the string or parse the returned strings into float, such as:

var marker = {
                        lat: parseFloat(hotelLat),
                        lng: parseFloat(hotelLng),
...
}

本文标签： javascriptInvalid LatLng object with Leaflet mapStack Overflow