4

在 Angular 和 Rails 应用程序中使用 Leaflet.js 和 Cloudmade 时，我完全无法解决一个奇怪的地图错误。这些地图几乎适用于所有地图，除了我得到的一些暂存地图（适用于开发）：未捕获的错误：它说未定义的无效 LatLng 对象。我从 JSON 中获取 lat 和 long 并且我已经验证了 lat 和 long 存在于 JSON 中，并且相同的 lat/long 适用于类似的地图。在传单源代码中，它说当纬度/经度不是数字时给出错误，但我很困惑纬度/经度在我的 json 中时如何不是数字。这是我在 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 密钥。我正在使用 Leaflet 的最新稳定版本，其中包含此代码修复，这是我能找到的最佳 Google 搜索结果。我的地图位于 Bootstrap 使用的选项卡式内容中。这里可能有什么问题？或者我会怎么做来调试这个？任何帮助将不胜感激，如果需要，我很乐意提供更多详细信息。

4

1 回答 1

6

不确定您是否可以正常工作，但我遇到了类似的问题，即 lat/lng 是字符串，例如“53.12345”、“-1.6789”。如果是这种情况，要么更改字符串中返回的数据，要么将返回的字符串解析为浮点数，例如：

var marker = {
                        lat: parseFloat(hotelLat),
                        lng: parseFloat(hotelLng),
...
}
于 2014-04-27T08:25:24.533 回答