什么是错误的解决方案（无法读取未定义的属性'innerHTML'）在实现谷歌地图时

debugcn 发表于 Dev

贾拉德

当我在 ionic 3 项目中实施时，在我设置了在 ionic 3 中正确使用地图所需的所有步骤后，我已将谷歌地图包含在其中

（页面：在搜索栏中搜索的谷歌地图）

我的映射打字稿代码是：

import { Component, ElementRef, ViewChild, NgZone } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform, ViewController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { GoogleMapsProvider } from '../../providers/google-maps/google-maps';


declare var google ;
@IonicPage()
@Component({
  selector: 'page-map2',
  templateUrl: 'map2.html',
})
export class Map2Page {
    @ViewChild('map') mapElement: ElementRef;
    @ViewChild('pleaseConnect') pleaseConnect: ElementRef;

    latitude: number;
    longitude: number;
    autocompleteService: any;
    placesService: any;
    query: string = '';
    places: any = [];
    searchDisabled: boolean;
    saveDisabled: boolean;
    location: any; 

  constructor(public navCtrl: NavController, public zone: NgZone, public maps: GoogleMapsProvider, public platform: Platform, public geolocation: Geolocation, public viewCtrl: ViewController) {
    this.searchDisabled = true;
    this.saveDisabled = true;

  }

  ionViewDidLoad(): void {
    let mapLoaded = this.maps.init(this.mapElement.nativeElement, this.pleaseConnect.nativeElement).then(() => {

      this.autocompleteService = new google.maps.places.AutocompleteService();
      this.placesService = new google.maps.places.PlacesService(this.maps.map);
      this.searchDisabled = false;

  });
  }

  selectPlace(place){

    this.places = [];

    let location = {
        lat: null,
        lng: null,
        name: place.name
    };

    this.placesService.getDetails({placeId: place.place_id}, (details) => {

        this.zone.run(() => {

            location.name = details.name;
            location.lat = details.geometry.location.lat();
            location.lng = details.geometry.location.lng();
            this.saveDisabled = false;

            this.maps.map.setCenter({lat: location.lat, lng: location.lng});

            this.location = location;

        });

    });

}

searchPlace(){

    this.saveDisabled = true;

    if(this.query.length > 0 && !this.searchDisabled) {

        let config = {
            types: ['geocode'],
            input: this.query
        }

        this.autocompleteService.getPlacePredictions(config, (predictions, status) => {

            if(status == google.maps.places.PlacesServiceStatus.OK && predictions){

                this.places = [];

                predictions.forEach((prediction) => {
                    this.places.push(prediction);
                });
            }

        });

    } else {
        this.places = [];
    }

}

save(){
    this.viewCtrl.dismiss(this.location);
}

close(){
    this.viewCtrl.dismiss();
}  

}

我的这个页面的 html 代码是：

<ion-header>
    <ion-navbar color="primary">
        <ion-buttons left>
            <button ion-button (click)="close()">Cancel</button>
        </ion-buttons>
        <ion-buttons right>
            <button [disabled]="saveDisabled" ion-button (click)="save()">Save</button>
        </ion-buttons>
    </ion-navbar>

    <ion-toolbar>
        <ion-searchbar [(ngModel)]="query" (ionInput)="searchPlace()"></ion-searchbar>
    </ion-toolbar>

    <ion-list>
        <ion-item *ngFor="let place of places" (touchstart)="selectPlace(place)">{{place.description}}</ion-item>
    </ion-list>

</ion-header>

<ion-content>

    <div #pleaseConnect id="please-connect">
        <p>Please connect to the Internet...</p>
    </div>

    <div #map id="map">
        <ion-spinner></ion-spinner>
    </div>

</ion-content>

我的问题是，当我去测试代码并查看结果时，它给了我一个错误：

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'innerHTML' of undefined
TypeError: Cannot read property 'innerHTML' of undefined
    at Object._.QA (util.js:19)
    at l$.attributionText_changed (places_impl.js:40)
    at Rc (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:50)
    at l$._.J.bindTo (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:118)
    at Object.m$.f (places_impl.js:40)
    at yw.<anonymous> (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:146)
    at Object._.Q (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:62)
    at new yw (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:146)
    at map2.ts:37
    at t.invoke (polyfills.js:3)
    at Object._.QA (util.js:19)
    at l$.attributionText_changed (places_impl.js:40)
    at Rc (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:50)
    at l$._.J.bindTo (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:118)
    at Object.m$.f (places_impl.js:40)
    at yw.<anonymous> (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:146)
    at Object._.Q (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:62)
    at new yw (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:146)
    at map2.ts:37
    at t.invoke (polyfills.js:3)
    at c (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4620)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)
    at <anonymous>

ts 代码中的第 37 行看起来像它的错误原因是这一行：

this.placesService = new google.maps.places.PlacesService(this.maps.map);

我已经搜索过这个错误，但我找不到解决方案，特别是它出现在实现谷歌地图的代码中

谷歌地图提供商代码是

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';
import { ConnectivityServiceProvider } from '../connectivity-service/connectivity-service';
import { Geolocation } from '@ionic-native/geolocation';

declare var google ;
@Injectable()
export class GoogleMapsProvider {
  mapElement: any;
  pleaseConnect: any;
  map: any;
  mapInitialised: boolean = false;
  mapLoaded: any;
  mapLoadedObserver: any;
  currentMarker: any;
  apiKey: string = "AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U";

  constructor(public http: HttpClient , public connectivityService: ConnectivityServiceProvider, public geolocation: Geolocation) {
    console.log('Hello GoogleMapsProvider Provider');
  }

  init(mapElement: any, pleaseConnect: any): Promise<any> {

    this.mapElement = mapElement;
    this.pleaseConnect = pleaseConnect;

    return this.loadGoogleMaps();

  }

  loadGoogleMaps(): Promise<any> {

    return new Promise((resolve) => {

      if(typeof google == "undefined" || typeof google.maps == "undefined"){

        console.log("Google maps JavaScript needs to be loaded.");
        this.disableMap();

        if(this.connectivityService.isOnline()){

          window['mapInit'] = () => {

            this.initMap().then(() => {
              resolve(true);
            });

            this.enableMap();
          }
          let script = document.createElement("script");
          script.id = "googleMaps";

          if(this.apiKey){
            script.src = 'http://maps.google.com/maps/api/js?key=' + this.apiKey + '&callback=mapInit&libraries=places';
          } else {
            script.src = 'http://maps.google.com/maps/api/js?callback=mapInit';      
          }

          document.body.appendChild(script); 

        }
      } else {

        if(this.connectivityService.isOnline()){
          this.initMap();
          this.enableMap();
        }
        else {
          this.disableMap();
        }

        resolve(true);

      }

      this.addConnectivityListeners();

    });

  }

  initMap(): Promise<any> {

    this.mapInitialised = true;

    return new Promise((resolve) => {

      this.geolocation.getCurrentPosition().then((position) => {

        let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

        let mapOptions = {
          center: latLng,
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        this.map = new google.maps.Map(this.mapElement, mapOptions);
        resolve(true);

      });

    });

  }

  disableMap(): void {

    if(this.pleaseConnect){
      this.pleaseConnect.style.display = "block";
    }

  }

  enableMap(): void {

    if(this.pleaseConnect){
      this.pleaseConnect.style.display = "none";
    }

  }

  addConnectivityListeners(): void {

    this.connectivityService.watchOnline().subscribe(() => {

      setTimeout(() => {

        if(typeof google == "undefined" || typeof google.maps == "undefined"){
          this.loadGoogleMaps();
        }
        else {
          if(!this.mapInitialised){
            this.initMap();
          }

          this.enableMap();
        }

      }, 2000);

    });

    this.connectivityService.watchOffline().subscribe(() => {

      this.disableMap();

    });

  }

}

请问那个错误的解决方法是什么

还有一个关于谷歌地图主题的问题..有没有办法从谷歌地图中获取有关地点的信息，并在项目中以特殊警报、吐司或模态或类似的方式显示它？（平均点它从谷歌地图获取数据到项目中）

非常感谢

丹尼尔·斯里佩尔

您的initMap方法是一个异步函数，但是您的代码并不总是这样对待它。例如，您的loadGoogleMaps方法的一部分具有以下内容：

if (this.connectivityService.isOnline()) {
    this.initMap();
    this.enableMap();
}
else {
    this.disableMap();
}

resolve(true);

这里的问题是您过早地启用地图并解决此方法中的承诺（意味着在工作initMap完成之前）。您需要确保在地图初始化完成后执行此工作。

if (this.connectivityService.isOnline()) {
    this.initMap().then(() => {
        this.enableMap();
        resolve(true);
    });
}
else {
    this.disableMap();
    resolve(true);
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。