Google Maps DrawingManager не определен в Angular - PullRequest
Новая
       29

Google Maps DrawingManager не определен в Angular

0 голосов
/ 27 декабря 2018

Я пытаюсь изменить несколько параметров диспетчера чертежей Карт Google, нажимая кнопку с помощью Angular.Но я получаю сообщения об ошибках, в которых говорится, что переменная DrawingManager не определена.

Я инициализировал Google Maps и DrawingManager в функции ngAfterViewInit в угловом компоненте.Объект Google Map и объект Drawing Manager назначаются переменным в компоненте, как показано в коде.Я хочу изменить несколько параметров Диспетчера чертежей, нажав кнопку в компоненте.Функция drawControlEnable вызывается нажатием кнопки.Но объект DrawingManager не определен внутри функции "drawControlEnable".Я поместил Google Maps Script в index.html и код для компонента.

Index.html 

<script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXXX&libraries=drawing,geometry"></script>

Угловой компонент 

import {Component, OnInit, ViewChild, AfterViewInit} from '@angular/core';
import { } from '@types/googlemaps';

.....
.....

@ViewChild('gmap') gmapElement: any;
map: google.maps.Map;
shapes = [];
coordinatesArray = [];
drawingManager: any;

ngAfterViewInit() {
    var mapProp = {
      center: new google.maps.LatLng(7.515073, 80.723066),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);

    this.drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: null,
        drawingControl: false,
        drawingControlOptions: {
           position: google.maps.ControlPosition.TOP_CENTER,
           drawingModes: ['polygon']
        },
        markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
        polygonOptions: {
           editable: true,
           draggable: true
        }
    });
    this.drawingManager.setMap(this.map);
}
.....
.....
drawControlEnable() {
this.drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
    this.drawingManager.setOptions({drawingControl : true});
}

Как яможно изменить параметры DrawingManager, нажав кнопку?

1 Ответ

0 голосов
/ 12 марта 2019

Вот как я создаю карту и изменяю параметр управления рисованием с помощью кнопки: сначала я объявляю две переменные: одну для карты и одну для DrawingManager 

  theMap: any;
  drawingManager: any;

, когда я создаю карту вngOnInit и вызовите DrawingManager: 

this.theMap = this.initMap(lat, lng);

if(this.theMap) {
      this.initDrawingManager(this.theMap)
}

. Две функции для создания карты и инициализации менеджера чертежей: 

  initMap(lat, lng) {
    let mapProp = {
      center: new google.maps.LatLng(lat, lng),
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    let map = new google.maps.Map(document.getElementById("map"), mapProp);

    let marker = new google.maps.Marker({
      icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
      animation: google.maps.Animation.DROP,
      position: { lat: lat, lng: lng },
      map: map
    })

    return map;
  }

и 

  initDrawingManager(map) {
    this.drawingManager = new google.maps.drawing.DrawingManager({
      // drawingMode: google.maps.drawing.OverlayType.MARKER,
      drawingControl: false,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: ['circle', 'polygon']
      },
      // markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
      polygonOptions: {
        draggable: true,
        editable: true
      },
      circleOptions: {
        // fillColor: '#ffff00',
        // fillOpacity: 1,
        // strokeWeight: 5,
        draggable: true,
        clickable: true,
        editable: true,
        zIndex: 1
      }
    });

    this.drawingManager.setMap(map);
  }

Функцияизменяет параметр DrawingControl: 

  change() {
    this.drawingManager.setOptions({
      drawingControl: true
    });
  }

и HTML-код: 

<button
   (click)="change()">
   change
</button>

При нажатии кнопки на карте появятся элементы управления рисованием.

Наша разница в том, что я создаю карту в ngOnInit.

...