Использование API карт Google для рисования полилиний на картах путем нажатия в Ionic - PullRequest
Новая
       14

Использование API карт Google для рисования полилиний на картах путем нажатия в Ionic

0 голосов
/ 02 августа 2020

Я работаю над проектом, где в Ioni c, где я использую Google Maps jS API для рисования полилиний, когда пользователь щелкает мышью. Я последовал приведенному примеру https://developers.google.com/maps/documentation/javascript/examples/polyline-complex#all. Карта загружается хорошо, но проблема в том, что каждый раз, когда я нажимаю на нее, чтобы нарисовать карту, я получаю следующую ошибку: 

core.js:6228 ERROR TypeError: Cannot read property 'getPath' of undefined
    at Si.addLatLng (remote.page.ts:42)
    at pf.H (js?key=YOUR_API_KEY&libraries=geometry:220)
    at Object._.L.trigger (js?key=(my_key)&libraries=geometry:217)
    at uw (map.js:24)
    at rw (map.js:22)
    at Object.onClick (map.js:21)
    at Gp._.r.Nb (common.js:148)
    at Bp._.r.Nb (common.js:147)
    at cq (common.js:61)
    at HTMLDocument.Ga._.Np.Tb (common.js:61)
defaultErrorLogger @ core.js:6228
handleError @ core.js:6281
next @ core.js:42614
schedulerFn @ core.js:37119
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:37079
(anonymous) @ core.js:41694
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:41488
onHandleError @ core.js:41691
handleError @ zone-evergreen.js:363
runTask @ zone-evergreen.js:171
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCaptureCallback @ zone-evergreen.js:1672

Я искал причину этого, но не могу найти правильный ответ. Что могло быть причиной этого. Я установил типовые карты Google с помощью команды: npm install --save-dev @types/googlemaps

Вот код машинописного текста: 

/// <reference types="@types/googlemaps" />
import { Component, OnInit } from '@angular/core';
// import { } from 'googlemaps';
// import {googlemaps} from '@types/googlemaps'

  declare var google;

@Component({
  selector: 'app-remote',
  templateUrl: './remote.page.html',
  styleUrls: ['./remote.page.scss'],
})
export class RemotePage implements OnInit {
 poly: google.maps.Polyline;
 map: google.maps.Map;

  constructor() { }

  ngOnInit() {
    this.map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
      zoom: 7,
      center: { lat: 37.386052, lng: -122.083851 } // Center the map on Chicago, USA.
    });

    this.poly = new google.maps.Polyline({
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 3
    });
    this.poly.setMap(this.map);

    // Add a listener for the click event
    this.map.addListener('click', this.addLatLng);
  }

 initMap(): void {

}

// Handles click events on a map, and adds a new point to the Polyline.
addLatLng(event: google.maps.MouseEvent) {
  const path = this.poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  // tslint:disable-next-line: no-unused-expression
  new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: this.map
  });
}

}

Буду признателен за вашу помощь. Спасибо

...