【发布时间】：2019-10-18 10:39:20
【问题描述】：
我正在使用流星的 leaflet.js 包，但在初始渲染时无法将地图默认设置为我当前的位置。 setView 方法适用于硬数字，但它不喜欢我的变量。我对 js 很陌生，所以错误可能很明显。这是我所拥有的：
Template.map.rendered = function() {
L.Icon.Default.imagePath = 'packages/bevanhunt_leaflet/images';
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
console.log('--- Your Position: ---');
console.log('Lat: ' + position.coords.latitude);
latit = position.coords.latitude;
console.log('Long: ' + position.coords.longitude);
longit = position.coords.longitude;
console.log('---------------------');
var abc = L.marker([position.coords.latitude, position.coords.longitude]).addTo(map);
}
)}
map = L.map('map', {
doubleClickZoom: false
}).setView([latit, longit], 13);
我不断收到的错误是
Uncaught TypeError: Cannot read property 'addLayer' of undefined
L.Marker.L.Class.extend.addTo @ leaflet-src.js:3511
(anonymous function) @ client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:28
当我使用 console.log(latit) 或 console.log(longit) 时，它会返回数字，以及后面的“未定义”。提前感谢任何可以提供帮助的人！
编辑：
初始渲染时的确切控制台输出：
Exception from Tracker afterFlush function:
debug.js:41 ReferenceError: latit is not defined
at Template.map.rendered (client.js? ea76789cca0ff64d5985320ec2127d5de1fb802f:36)
at template.js:116
at Function.Template._withTemplateInstanceFunc (template.js:437)
at fireCallbacks (template.js:112)
at null.<anonymous> (template.js:205)
at view.js:104
at Object.Blaze._withCurrentView (view.js:523)
at view.js:103
at Object.Tracker._runFlush (tracker.js:468)
at onGlobalMessage (setimmediate.js:102)
client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:22 --- Your Position: ---
client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:23 Lat: 41.0525926
client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:25 Long: -73.5398427
client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:27 ---------------------
leaflet-src.js:3511 Uncaught TypeError: Cannot read property 'addLayer' of undefinedL.Marker.L.Class.extend.addTo @ leaflet-src.js:3511(anonymous function) @ client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:28
编辑 2： 我想保持简单，但这是我的完整 js：
var map;
var latit;
var longit;
// on startup run resizing event
Meteor.startup(function() {
$(window).resize(function() {
$('#map').css('height', window.innerHeight - 82 - 45);
});
$(window).resize(); // trigger resize event
});
// create marker collection
var Markers = new Meteor.Collection('markers');
Meteor.subscribe('markers');
Template.map.rendered = function() {
L.Icon.Default.imagePath = 'packages/bevanhunt_leaflet/images';
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
console.log('--- Your Position: ---');
console.log('Lat: ' + position.coords.latitude);
latit = position.coords.latitude;
console.log('Long: ' + position.coords.longitude);
longit = position.coords.longitude;
console.log('---------------------');
var abc = L.marker([position.coords.latitude, position.coords.longitude]).addTo(map);
}
)}
map = L.map('map', {
doubleClickZoom: false
}).setView([latit, longit], 13); //Error is somewhere before here!!
L.tileLayer.provider('Thunderforest.Outdoors').addTo(map);
map.on('dblclick', function(event) {
Markers.insert({latlng: event.latlng});
});
//add markers
var query = Markers.find();
query.observe({
added: function (document) {
var marker = L.marker(document.latlng).addTo(map)
.on('click', function(event) {
map.removeLayer(marker);
Markers.remove({_id: document._id});
});
},
//remove markers
removed: function (oldDocument) {
layers = map._layers;
var key, val;
for (key in layers) {
val = layers[key];
if (val._latlng) {
if (val._latlng.lat === oldDocument.latlng.lat && val._latlng.lng === oldDocument.latlng.lng) {
map.removeLayer(val);
}
}
}
}
});
};
【问题讨论】：
-
能否给出控制台的准确输出？
-
@Sosdoc 编辑了 OP
-
你在哪里声明
latit和longit？ （你在某处说var latit吗？） -
@Stevec 我们错过了大局，但看起来您的
rendered回调无法访问地图，因为latit和longit第一次未定义，请执行你有没有初始化它们？在L.map调用之前的console.log()会有所帮助 -
@sfletche 我确实说 var latit;和 var longit;在我的 js 顶部，在任何功能之前
标签： javascript meteor undefined leaflet