我使用Vue和Leaflet在地图上显示多边形(区域)。此外,我想要在使用 polygon.on 功能在地图上单击它们之后显示有关特定多边形的适当信息(消息)。 但似乎我当时无法调用getMessages函数,我总是收到消息"无法读取属性' call'未定义" 。 有人知道如何才能做到这一点吗?
var map = new Vue ({
el: '#messagearea',
data: {
function() {
return {
map: false
};
},
zones: [],
messages:[],
},
ready: function() {
this.map = L.map('map').setView([51.959, 7.623], 14);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(this.map);
this.$http.get('/api/zones', function(data) {
this.$set('zones', data);
for (var i = 0; i < this.zones['Zones'].length; i++) {
polygon = L.polygon(
this.zones['Zones'][i]['Geometry']['Coordinates']).addTo(this.map);
polygon.bindPopup(this.zones['Zones'][i]['Name']);
polygon.on('click', this.getMessages(this.zones['Zones'][i]['Zone-id']));
}
});
},
methods:
{
getMessages: function(id) {
this.$http.get('/api/messages?zone='+id, function(data) {
this.$set('messages', data['Messages']);
});
}
}
})
答案 0 :(得分:1)
你混淆了函数引用和函数调用的概念。阅读Leaflet marker event fires at wrong time - 即使问题和设置不同,解决方案也是一样的。