Estoy tratando de hacer que esto funcione según la documentación de Microsoft .
El siguiente código de secuencia de comandos funciona perfectamente en una aplicación React existente y estoy tratando de transferir la aplicación a Blazor. El script se carga y se inicia, y puedo ver que el Iframe se carga correctamente en el DOM del navegador. Sin embargo, la secuencia de comandos (secuencia de comandos mapkit.js de Apple) falla con Attempted to assign to readonly property en la función migrateStateTo , tratando de establecer t.tint = this.node.tint .
MapkitHelper.js
import "https://cdn.apple-mapkit.com/mk/5.xx/mapkit.js"; export function initialiseMapkit(token, element) { // this call seems to work mapkit.init({ authorizationCallback: function(done) { done(token) } }) // from here on things seem to go south no matter what I do var map = new mapkit.Map(element) }MapkitRenderer.razor
@implements IAsyncDisposable @inject IJSRuntime JS <div @ref="mapkitElement"></div> @code { public string? token = Environment.GetEnvironmentVariable("MAPKIT_JS_TOKEN"); private ElementReference mapkitElement; private IJSObjectReference? mapModule; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { mapModule = await JS.InvokeAsync<IJSObjectReference>("import", "./MapkitHelper.js"); await mapModule.InvokeVoidAsync("initialiseMapkit", token, mapkitElement); } } async ValueTask IAsyncDisposable.DisposeAsync() { if (mapModule is not null) { await mapModule.DisposeAsync(); } } }Encontré este problema porque cargué mapkit.js como un módulo.
import "https://cdn.apple-mapkit.com/mk/5.xx/mapkit.js";Cargar mapkit.js como un módulo genera una excepción porque mapkit.js no es compatible con el modo estricto de JavaScript. En su lugar, debe cargar mapkit.js en modo descuidado.
<script src=""https://cdn.apple-mapkit.com/mk/5.xx/mapkit.js"></script>