当我在我的 ionic 3 项目中实现时，在我设置了在 ionic 3 中正确使用地图所需的所有步骤后，我被包含在其中 google 地图
(页面：谷歌地图与搜索栏搜索)
我的映射打字稿代码是：
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);
}