Question

在Angular和Rails应用程序中使用Leaflet.js和Cloudmade时，我完全坚持解决一个奇怪的地图错误。这些地图几乎可以在每个地图上工作，除了我正在获得的分段上的几张地图（适用于开发）：未捕获错误：无效的LatLng对象，它说是未定义的。我从JSON获得了lat和long，我已经验证了在JSON中存在lat和long，并且相同的lat / long适用于类似的地图。在Leaflet源代码中，它表示当lat / long为Not-A-Number时给出了错误，但是当我们在json中时，我很困惑lat / long不是数字。这是我在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

这里有一点代码：

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

当然，链接将替换为我的API密钥。我正在使用包含this code fix的最新稳定版Leaflet，这是我能找到的最佳Google搜索结果。我的地图位于Bootstrap使用的标签内容中。这里有什么问题？或者我该怎么做才能调试这个？非常感谢任何帮助，如果需要，我很乐意提供更多细节。

Answer 1

不确定你是否有这个工作，但我有一个类似的问题，lat / lng是字符串，如“53.12345”，“-1.6789”。如果是这种情况，请更改字符串中返回的数据或将返回的字符串解析为float，例如：

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

带有Leaflet映射的无效LatLng对象

1 个答案: