core.mjs:6484 ERROR TypeError: Cannot read property 'topright' of undefined
at NewClass.addTo (leaflet-src.js:4759)
at SafeSubscriber._next (tab2.page.ts:132)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
at SafeSubscriber.next (Subscriber.js:122)
at Subscriber._next (Subscriber.js:72)
at Subscriber.next (Subscriber.js:49)
at Subject.next (Subject.js:39)
at GlobalFooService.publishSomeData (global-foo.service.ts:12)
at Tab1Page.buttonClick (tab1.page.ts:57)
at Tab1Page_ion_item_11_Template_ion_item_click_0_listener (template.html:19)
core.mjs:6484 ERROR TypeError: Cannot read property '_removePath' of undefined
at NewClass.onRemove (leaflet-src.js:7817)
at NewClass.removeLayer (leaflet-src.js:6642)
at NewClass.eachLayer (leaflet-src.js:6856)
at NewClass.onRemove (leaflet-src.js:6844)
at NewClass.removeLayer (leaflet-src.js:6642)
at NewClass._clearLines (leaflet-routing-machine.js:16186)
at NewClass.<anonymous> (leaflet-routing-machine.js:16163)
at NewClass.<anonymous> (leaflet-routing-machine.js:18004)
at XMLHttpRequest.loaded [as __zone_symbol__ON_PROPERTYload] (leaflet-routing-machine.js:46)
at XMLHttpRequest.wrapFn (zone.js:803)
当我将大部分代码放在我的leafletMap() 函数中的订阅异步中时,就会发生这种情况。如果我取出路由控制代码,则会发生一系列其他错误,这些错误将导致编译失败。如何处理这些错误,我需要订阅异步以从我的 Ionics 选项卡项目中的另一个选项卡中获取数据,以便选择酒店。
leafletMap() {
// Set the position and zoom level of the map
this.map = L.map('mapId', {
closePopupOnClick: false,
scrollWheelZoom: false
}).setView([<!-- default coordinates -->], 17);
// Initialize the base layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 19
}).addTo(this.map);
this.globalFooService.getObservable().subscribe((data) => {
var hotelNames = [];
for(var c = 0; c < this.hotelItems.length; c++) {
hotelNames.push(this.hotelItems[c].name);
}
var opt = 0;
opt = hotelNames.indexOf(data) + 1;
var coordinate = [];
for(var a = 0; a < this.pointItems.length; a++) {
coordinate.push(L.latLng(this.pointItems[a].coordinates));
}
var names = []
for(var a = 0; a < this.pointItems.length; a++) {
names.push(this.pointItems[a].name);
}
var route = [];
var spots = [];
if(opt > 0) {
route.push(this.hotelItems[opt - 1].coordinates);
var n = Number.MAX_VALUE;
var sort = [];
for (var i = 0; i < 7; i++) {
for(var x = 0; x < coordinate.length; x++) {
sort.push(coordinate[x].distanceTo(route[i]));
}
for(var y = 0; y < sort.length; y++) {
if(sort[y] < n) {n = sort[y];}
}
for(var z = 0; z < coordinate.length; z++) {
if(coordinate[z].distanceTo( route[i]) == n) {
route.push(coordinate[z]);
spots.push(names[z]);
coordinate.splice(z, 1);
names.splice(z, 1);
break;
}
}
while( sort.length > 0 ) {sort.pop();}
n = Number.MAX_VALUE;
}
const control = L.Routing.control({
waypoints: route,
show: false,
waypointMode: 'snap',
createMarker: function() {}
}).addTo(this.map);
control.on('routeselected', function(c) {
this.path = L.polyline(c.route.coordinates, {color: '#FF0000'}).addTo(this.map);
this.map.removeControl(control);
});
const popup = L.popup().setLatLng(route[0]).setContent("You will be staying at " + this.hotelItems[opt - 1].name + ". Tap the hotel marker to save your journey.");
this.map.addLayer(popup);
this.hotel = L.marker().setLatLng(route[0]).addTo(this.map);
for( var m = 1; m < route.length; m++ ) {
this.markers.push(
L.marker().setLatLng(route[m]).addTo(this.map)
);
this.popups.push(
L.popup().setLatLng(route[m]).setContent(spots[m - 1])
);
this.map.addLayer(this.popups[m - 1]);
}
}
});
}