मैं एक आयनिक/संधारित्र अनुप्रयोग में मानचित्रों को एकीकृत करने के लिए कोणीय सामग्री Google मानचित्र घटक का उपयोग कर रहा हूं।

https://github.com/angular/components/tree/master/src/google-maps

जब मैं एप्लिकेशन विकसित कर रहा हूं तो मानचित्र कार्यक्षमता पूरी तरह से ठीक काम करती है। जब मैं Google मानचित्र को लागू करने वाले घटक के लिए परीक्षण फ़ाइल चलाने का प्रयास करता हूं, तो मुझे यह त्रुटि मिलती है:

Failed: Namespace google not found, cannot construct embedded google map. Please install the Google Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
Error: Namespace google not found, cannot construct embedded google map. Please install the Google Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
    at new GoogleMap (http://localhost:9876/_karma_webpack_/node_modules/@angular/google-maps/__ivy_ngcc__/fesm2015/google-maps.js:202:1)
    at NodeInjectorFactory.GoogleMap_Factory [as factory] (http://localhost:9876/_karma_webpack_/node_modules/@angular/google-maps/__ivy_ngcc__/fesm2015/google-maps.js:441:49)
    at getNodeInjectable (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:4029:1)
    at instantiateAllDirectives (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7964:1)
    at createDirectivesInstances (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7330:1)
    at ɵɵelementStart (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:13902:1)
    at HomePage_Template (ng:///HomePage.js:79:9)
    at executeTemplate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7303:1)
    at renderView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7112:1)
    at renderComponent (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:8373:1)

Karma.conf.js (यह एक आखिरी खाई का प्रयास था, कोई भाग्य नहीं।):

config.set({
  ...
  plugins: [
    ...
    require('@angular/google-maps')
  ],
  ...
});

एचटीएमएल:

<google-map>
    <map-rectangle
      *ngIf="showSelectionUI"
      [bounds]="bounds"
      [options]="options"
    ></map-rectangle>
    <map-marker
      #marker="mapMarker"
      *ngFor="let position of markerPositions"
      [position]="position"
     ></map-marker>
</google-map>

टाइपप्रति:

@ViewChild(GoogleMap) map: GoogleMap;

@ViewChild(MapRectangle) rectangle: MapRectangle;

और यहाँ पूरी कल्पना फ़ाइल है:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';

import { HomePage } from './home.page';
import { Storage } from '@ionic/storage';

import {
  HttpClientTestingModule,
  HttpTestingController
} from '@angular/common/http/testing';
import { GoogleMapsModule, GoogleMap } from '@angular/google-maps';
import { GooglePlaceModule } from 'ngx-google-places-autocomplete';

describe('HomePage', () => {
  let component: HomePage;
  let fixture: ComponentFixture<HomePage>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [HomePage],
      imports: [
        IonicModule.forRoot(),
        HttpClientTestingModule,
        GoogleMapsModule,
        GooglePlaceModule
      ],
      providers: [
        {
          provide: Storage,
          useValue: {
            get: () => 'manual'
          }
        }
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(HomePage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});
1
Don G. 22 जिंदा 2021, 06:49

3 जवाब

सबसे बढ़िया उत्तर

अपनी लाइब्रेरी विकसित करते समय मैं उसी समस्या में भाग गया। समाधान Google से जावास्क्रिप्ट एपीआई फ़ाइल डाउनलोड करना था, इसे कार्यक्षेत्र में सहेजना था, फिर परीक्षण चलाने से पहले कर्म को लोड करने के लिए कॉन्फ़िगर करना था।

मेरे karma.conf फ़ाइल.

और ये रहा google-maps-api.js फ़ाइल

ध्यान दें कि इसका मतलब है कि यदि Google कोई भी ब्रेकिंग परिवर्तन जारी करता है तो आपको फ़ाइल को मैन्युअल रूप से फिर से डाउनलोड करना और बदलना पड़ सकता है। शायद कोई बड़ी बात नहीं है। सिर्फ मन में रखने वाली कुछ बातें।

🎁 दूसरी ओर ध्यान दें, मेरी लाइब्रेरी @bespunky/angular-google-maps पर एक नज़र डालें। इसके द्वारा प्रदान की जाने वाली शानदार सुविधाओं के अलावा, इसमें एक परीक्षण सूट भी है।

चीयर्स

2
Shy Agam 22 मार्च 2021, 03:16

Angular Google Maps। मेरे पास एक संग्रहीत भंडार और वेबसाइट है जिस पर मार्कर के साथ Google मानचित्र का उपयोग किया जाता है यहां

app.module.ts

import { AgmCoreModule } from '@agm/core';

घटक का HTML टेम्प्लेट

<agm-map [latitude]="lat" [zoom]="zoom" [longitude]="lng" [mapTypeId]="'hybrid'" style="height: 600px;">
    <agm-marker  [latitude]="lat" [longitude]="lng" ></agm-marker>
</agm-map>

घटक का टाइपप्रति टेम्पलेट

lat: number = 41.6600203;
lng: number = -88.7526228;
zoom: number = 15;
0
xinthose 22 जिंदा 2021, 08:48
2
इसलिए, मानचित्र का कार्यान्वयन ठीक है। यह केवल परीक्षण फ़ाइल है जहाँ मुझे यह त्रुटि मिलती है। मैं ढांचे को बदलने के लिए खुला हूं, लेकिन मैं पहले से ही कॉर्डोवा मानचित्रों से कोणीय/घटक Google मानचित्रों में स्थानांतरित हो चुका हूं। इसलिए अगर मैं परीक्षण सेटअप के लिए एक छोटी सी चीज को याद कर रहा हूं, तो मुझे फिर से उस प्रक्रिया से गुजरने में संकोच हो रहा है।
 – 
Don G.
22 जिंदा 2021, 19:06
मैं हाल ही में एजीएम/कोर से गूगल मैप्स के मूल कोणीय कार्यान्वयन में चला गया, मुख्यतः क्योंकि एजीएम/कोर एंगुलर 10 और इसके बाद के संस्करण में समर्थित नहीं है।' मुझे एक ही नामस्थान समस्या का सामना करना पड़ रहा है, केवल इकाई परीक्षण में।
 – 
featlorin
4 फरवरी 2021, 12:38

मेरे पास भी इसी तरह की समस्या थी और कई दिनों तक इस पर अटके रहने के बाद, मैंने फैसला किया कि मेरे यूनिट टेस्ट को मैप कंपोनेंट की परवाह नहीं करनी चाहिए, इसलिए मैंने एनजी-मॉक्स का उपयोग करके GoogleMap, MapInfoWinfo और MapMarker का मजाक उड़ाया।

एक तरह से, इसने मेरे लिए इसे हल कर दिया।

1
featlorin 10 फरवरी 2021, 00:17