0

Задача - использование минимального функционала Яндекс.Карт в проекте Blasor Server. Яндекс.Карты подключаются двумя файлами - html и js, процедура подробно описана здесь https://yandex.ru/dev/maps/jsbox/2.1/mapbasics/, но повторю:

mapbasics.js

// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);

function init () {
    // Создание экземпляра карты и его привязка к контейнеру с
    // заданным id ("map").
    myMap = new ymaps.Map('map', {
        // При инициализации карты обязательно нужно указать
        // её центр и коэффициент масштабирования.
        center: [55.76, 37.64], // Москва
        zoom: 10
    }, {
        searchControlProvider: 'yandex#search'
    });

    document.getElementById('destroyButton').onclick = function () {
        // Для уничтожения используется метод destroy.
        myMap.destroy();
    };
}

mapbasics.html

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Создание и удаление</title>
    <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>" type="text/javascript"></script>
    <script src="mapbasics.js" type="text/javascript"></script>
    <style>
        body, html {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%;
            height: 90%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <input type="button" id="destroyButton" value="Удалить карту"/>
</body>

</html>

В оффлайн эта пара работает отлично, и на статическом сайте, наверное, тоже. А в Blazor проблемы. Файл html переформатируется в страницу Razor, но:

Проблема 1. Blazor не терпит тегов script. Интернет советует перенести теги script в конец тега body. Это не работает, работает совет Blazor'а - перенос script в _Host.cshtml. И тут возникает:

Проблема 2. Blazor не видит JavaScript. Т.е. страница срабатывает в браузере, но отображает только кнопку "Удалить карту". Самой карты нет. Ошибок приложения тоже нет.

Проблема 3. Существует способ вызвать JS со страницы Razor, но в Blazor приложение не видит функцию JS, и при вызове дает ошибку.

Кто-нибудь может помочь?

Спасибо.

PS: Blazor Server

UPD1: Удалил лог, вряд ли его кто-то смотрел далее 1-й строки.

UPD2: Добавил свое решение

1 ответ 1

1

Итак, выполняем следующее:

1. Html превращаем в компонент Razor, точнее даже в Blazor, для чего:

1.1 меняем расширение .html на расширение .razor

1.2 добавляем в начале страницы:

@page "/mapbasics"

@using Microsoft.JSInterop

@inject IJSRuntime JSRuntime

1.3 теги script переносим в _Host.cshtml в head

1.4 удаляем тег head из mapbasics.razor

2. Добавляем функцию старта в mapbasics.js

// новый старт
function startmap() {
    // Дождёмся загрузки API и готовности DOM.
    ymaps.ready(init);
}

3. Добавляем код в mapbasics.razor

@code {
    // После того как все элементы DOM веб страницы загружены...
    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if (firstRender) {
             await JSRuntime.InvokeVoidAsync("startmap");
        }
    }
}

4. Уточняем вызов компонента в NavMenu.razor

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.