如何在ION4中将cordova GoogleMap赋值到java脚本映射PlacesService方法？

Question

我正在使用ionic 4中的GoogleMap cordova插件，它工作正常。但是，当我试图安装Google地图功能以便在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);

当我像这样使用placesService时：

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

起作用了。但是当我为typescript安装谷歌地图并删除=>变量的声明时

npm install @types/google-maps --save

我得到了这个错误：

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

placesServices不接受this.map。

Answer 1

我删除了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，但是有了地理编码，我想(我不确定)我们必须再次获得地址。

Answer 2

你可以使用这个教程，希望它能帮助你。

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