如何在 Ionic 4 中将 cordova GoogleMap 分配给 java 脚本映射 PlacesService

Question

我在 ionic 4 中使用 GoogleMap cordova 插件，它工作正常。 但是当我尝试安装谷歌地图功能以在 typeScript 中更好地工作时，我无法将地图对象传递给 google.map.place.placesService((;

import { GoogleMap, GoogleMapOptions} from '@ionic-native/google-maps/ngx';
declare var google: any;
....
....
const options: GoogleMapOptions = {
controls: {
compass: true,
myLocationButton: true,
myLocation: true,   //  (blue dot)
indoorPicker: true,
zoom: true,          //  android only
mapToolbar: true     //  android only
},
gestures: {
scroll: true,
tilt: true,
zoom: true,
rotate: true
},
camera: {
target: {
lat: this.latLng.lat,
lng: this.latLng.lng
},
zoom: 9
},
styles: [], //  https:// developers.google.com/maps/documentation/javascript/style-reference
preferences: {
zoom: {
minZoom: 1,
maxZoom: 23
},
padding: {
left: 10,
top: 10,
bottom: 10,
right: 10
},
building: true
}
};
this.map = GoogleMaps.create("gmap_Canvas", options);

当我使用地方服务时，如下所示：

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

但是当我为打字稿安装谷歌地图并删除 => var 谷歌的声明时

npm install @types/google-maps --save

我收到此错误：

Argument of type 'GoogleMap' is not assignable to parameter of type 'HTMLDivElement | Map<Element>'.

地方服务不接受此地图。

Answer 1

您可以使用本教程，这可以帮助您

https://medium.com/ramsatt/integrate-google-maps-on-ionic-4-beta-application-37497dbc12e3

Answer 2

我放弃了PlacesService，然后将完整的地址从autoComplete传递到Google.geoCode

加载地图后：

async loadMap(){
...
this.autocompleteService = new google.maps.places.AutocompleteService();
}
searchPlace() {
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);
});
}
});

最后，我从这种方法中获得了地理编码：

getCoder(place: any) {
this.places = [];
const options: GeocoderRequest = {
address: place.description
};
// Address -> latitude,longitude
Geocoder.geocode(options).then((results: GeocoderResult[]) => {
console.log(results);
this.map.setCameraTarget(results[0].position);
});

}

从 HTML 页面：

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

使用PlaceService，我们有Place_id但是使用地理编码，我认为(我不确定(我们必须再次获得地址。