Estoy tratando de obtener un círculo de cierto radio cuando el usuario hace clic en el botón. Mi aplicación está en Blazor. Empecé con la función de inicialización que funciona bien. Sin embargo, la función GetCircle() no funciona y me da un error de excepción 'map.addLayer is not a function' I.

Cuando también traté de declarar la variable de mapa y círculo en la parte superior del código, el error cambia a 'No se pueden leer las propiedades de undefined (leyendo '_leaflet_id')

Aquí está mi js:

 window.myMap = { initialise : function(){ var map = L.map('map').setView([51.75164151931502, -1.2382256195107832], 15); L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', maxZoom: 18, id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, accessToken: '----' }).addTo(map); var marker = L.marker([51.75262676993951, -1.2533975397416488]).addTo(map); map.on('click',function(e) { if (marker !== null ) { map.removeLayer(marker); } marker = new L.Marker(e.latlng); map.addLayer(marker); }); }, GetCircle: function() { //here is the issue var circle = L.circle([51.75262676993951,-1.2533975397416488],{radius:300}); map.addLayer(circle); } };

este es mi componente Blazor:

 @page "/testt" @inject IJSRuntime JSRuntime @using Microsoft.JSInterop <style> #map { height: 600px; } </style> <br> <div class="col-9" id="map" ></div> <button @onclick="GetCircle"> Get Area </button> @code{ protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await JSRuntime.InvokeVoidAsync("myMap.initialise"); StateHasChanged(); } } public async Task GetCircle() { await JSRuntime.InvokeVoidAsync("myMap.GetCircle"); } }

Obtengo 'map.addLayer no es una función' Intenté poner 'addTo(map)' en lugar de addLayer y salió el mismo error.

¿Alguna pista?