LINUX.ORG.RU

Как на angular6-страничку вставить виджет яндекс карты?

 , ,


0

1

Помогите пожалуйста решить проблему. У меня есть виджет яндекс карты, он написан другим разработчиком и встраивается в страничку приблизительно так:

<body>
	<div id="w"></div>
	<script src="//api-maps.yandex.ru/2.1/?load=package.standard&lang=ru_RU" type="text/javascript"></script>
	<script id="src" type="text/javascript" src="https://........../map.js"></script>
</body>

На обычной html-страничке он работает без проблем, но у меня задача вставить его в компонент angular6. Проблема в том, что шаблон фреймворка удаляет любые теги script. таким образом

<div id="w"></div>
остаётся просто пустым тегом.

Я пробовал

<div id="w"></div>
встраивать в шаблоне компонента, а все script в index.html. в результате виджет тоже не заработал

что ещё можно попробовать?

Обычный JS никто еще не отменял. Вполне можешь в ngAfterViewInit проверять подключен ли нужный скрипт. Скорее всего он добавляет методы в глобальную область видимости, по ним можно задетектить подгружен ли он. Дальше если не подгружен, создавай руками скрипт и добавляй в body. Ну и лучше все это вынести в отдельный сервис.

Deleted ()

ебать ты разработчик.

anonymous ()
Ответ на: комментарий от webmonkey

Это под первый ангуляр. Нормальных сорцов нет, ограничений версии ангуляра в package.json нет, нинада так делать.

Deleted ()
Ответ на: комментарий от Deleted

Нормальных сорцов нет,

вот черт, были же.

нинада так делать.

Теперь-то да. И вот как точно не надо делать:

у меня задача вставить его в компонент angular6
6.0.0 (2018-05-03)

webmonkey ()
Ответ на: комментарий от webmonkey

ох, я рад бы так не делать, но задачи ставлю не я. и на первый взгляд эта задача не сверхсложная

вот что я попробовал:

1. по совету выше я в компоненте по хуку ngAfterViewInit запустил процедуру, которая вставляет в DOM-дерево два скрипта и корневой элемент(они указаны в первом сообщении этой темы)

ngAfterViewInit() {
  this.renderMapWidget();
}

renderMapWidget() {
  const ymapsScript = document.createElement('script');
  ymapsScript.src = '//api-maps.yandex.ru/2.1/?load=package.standard&lang=ru_RU';

  const ymapsWidgetScript = document.createElement('script');
  ymapsWidgetScript.src = '//...............';

  setTimeout(() => {
    document.body.appendChild(ymapsScript);
    document.body.appendChild(ymapsWidgetScript);
  }, 2000);
}  

в результате при просмотре в браузере через инспектор я вижу, что скрипты встроились в странцу(их содержание открывается в новой вкладке при желании) и корневой элемент тоже встроился(но он пуст, то есть самой карты в нём нет). в консоли сообщений об ошибках нет

2. ещё я попробовал в index.html ангуляра встроить скрипты и корневой элемент(это получилось). затем при загрузке компонента определенной страницы я склонировал корневой элемент со свсем содержимым и встроил его в шаблон компонента, а старыйудалил из DOM. в результате компонент встроился наполовину работающий(самой карты не видно, но элемены UI карты видны)

prozaik ()
Ответ на: комментарий от prozaik

У тебя задача использовать шестой ангуляр или карты сделать? Почему надо брать версию, появившуюся три месяца назад?

Я какое-то время был не в кусе последних веяний, но, с учётом такой свистопляски, держался бы подальше от релизов ≥ 2.0 версий.

webmonkey ()
Ответ на: комментарий от webmonkey

карты сделаны уже до меня. задача их встроить в шестой ангуляр

я бы вообще от javascript подальше держался, но дошираки не на что покупать

prozaik ()
Ответ на: комментарий от webmonkey

Это вебня, я тут на пол года отвлекся, еле домигрировал до пятерки

Deleted ()
Последнее исправление: Deleted (всего исправлений: 1)
Ответ на: комментарий от prozaik

Settimeout в печь,либо делай это мимо ng-zone, но вообще он тут не нужен. Ты уверен, что после загрузки js'ок карт не нужно дернуть какой-нибудь их метод или оставить колбек в глобальной области?

Deleted ()
Ответ на: комментарий от prozaik

но дошираки не на что покупать

Ну раз ты в такую область переводишь, то даже не знаю, что тебе сказать или посоветовать.

webmonkey ()
Ответ на: комментарий от prozaik

УМВР, ЧЯДНТ?!

@Component({
  selector: 'my-map',
  template: '<div id="mymap"></div>',
})
export class MyMapComponent implements  AfterViewInit {

  
  constructor() {
    
  }
  

  ngAfterViewInit(): void {
    const ymapsScript = document.createElement('script');
    ymapsScript.src = '//api-maps.yandex.ru/2.1/?load=package.standard&lang=ru_RU';
    const ymapsWidgetScript = document.createElement('script');
    ymapsWidgetScript.src = 'https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A8f94cc586f75881b5cd555bf59c3b9b78edb6f84b724c51b1626cad239acf4a4&width=500&height=400&lang=ru_RU&scroll=true&id=mymap';
    document.body.appendChild(ymapsScript);
    document.body.appendChild(ymapsWidgetScript);
  }
}

Ну это POC, так на пол доширака, надо еще корректно удалять карты и при повторном добавлении клмпонента не подгружать скрипты.

Deleted ()
Последнее исправление: Deleted (всего исправлений: 1)
Ответ на: комментарий от prozaik

Ты передаешь картам параметр с айди элемента?

Deleted ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.