主页 / 问题 / 880850
Accepted
Masquitos
Asked:2020-09-13 17:44:06 +0000 UTC2020-09-13 17:44:06 +0000 UTC

如何在 Angular 5 中连接 yandex 地图？

  • 772

如何在 Angular 5 中连接 yandex 地图？我试图制作一个组件。但是在浏览器中使用会报错ng --open：ERROR TypeError: Cannot read property 'ready' of undefined 显然没有初始化ymaps如何加载呢？

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-yamaps',
  templateUrl: './yamaps.component.html',
  styleUrls: ['./yamaps.component.css']
})
export class YamapsComponent implements OnInit {
  ymaps: any;
  myCoordinates: any;
  myMap: any;
  myPlacemark: any;
  closeMapButton: any;

  constructor() { }

  ngOnInit() {
    this.ymaps.ready().then(
      () => {
        this.myMap = new this.ymaps.Map("map", {
          center: [37.5468326405449, 55.6623162095321],
          zoom: 15,
          controls: ['fullscreenControl', 'geolocationControl']
        }, {
            yandexMapDisablePoiInteractivity: true,
            suppressMapOpenBlock: true
          });

        //Создаем кнопку на карте
        this.closeMapButton = new this.ymaps.control.Button({
          data: {
            content: "Закрыть карту"
          },
          options: {
            maxWidth: [170, 400, 600]
          }
        });

        // Задает кнопку кликом
        this.myMap.events.add('click', function (e) {
          if (this.myPlacemark == null)
            this.myPlacemark = new this.ymaps.Placemark([], {});
          this.myMap.geoObjects.add(this.myPlacemark);
          var position = e.get('coords');
          this.myPlacemark.geometry.setCoordinates(position);
          this.myCoordinates = this.myPlacemark.geometry.getCoordinates();
          document.getElementById('sendDataToServer').removeAttribute("disabled");
        });

        this.ymaps.geolocation.get({
          // Выставляем опцию для определения положения по ip
          //provider: 'yandex',
          // Карта автоматически отцентрируется по положению пользователя.
          mapStateAutoApply: true
        }).then(function (result) {
          this.myMap.geoObjects.add(result.geoObjects);
          this.myPostition = result.geoObjects.position;
        });
      });
  }
}
yandex-maps-jsapi

2 个回答

  1. Stackblitz示例

    这里有几个主要文件。在下载地图的服务中，您可以而且应该添加对地图是否存在的检查，以便返回已经完成的地图（如果有）。

    // map-loader.service.ts
import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MapLoaderService {
  map$: Subject<any>;

  constructor() {
    this.map$ = new Subject<any>();
  }

  getMap(element: string, coords: number[]): Observable<any> {
    const scriptYmaps = document.createElement('script');
    scriptYmaps.src = 'https://api-maps.yandex.ru/2.1/?lang=ru_RU';
    document.body.appendChild(scriptYmaps);
    const createMap = () => {
      const map = new ymaps.Map(
        element,
        {
          center: coords,
          zoom: 9
        }
      )
    }
    scriptYmaps.onload = function () {
      ymaps.ready(createMap);
    }

    return this.map$;
  }
}

// app.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { MapLoaderService } from './map-loader.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  map: any;
  loading$: Subject<boolean>;
  ngUnsubscribe$: Subject<void>;

  constructor(
    private _mapLoaderService: MapLoaderService
  ) {
    this.loading$ = new Subject<boolean>();
    this.ngUnsubscribe$ = new Subject<void>();
   }

  ngOnInit() {
    this.loading$.next(true);
    this._mapLoaderService.getMap(
      'map',
      [55.751574, 37.573856]
    )
    .pipe(
      takeUntil(this.ngUnsubscribe$)
    )
    .subscribe(map => {
      this.map = map;
      this.loading$.next(false);
    });
  }

  ngOnDestroy() {
    this.ngUnsubscribe$.next();
    this.ngUnsubscribe$.complete();
  }
}
    • 1
  2. Best Answer

    安装了这个东西https://www.npmjs.com/package/ymaps并注册它(window as any).global = window;似乎工作。

    import { Component, OnInit } from '@angular/core';
import ymaps from 'ymaps';
(window as any).global = window;
    • 0

相关问题