如何将 cordova GoogleMap 分配给 Ionic 4 中的 java 脚本映射 PlacesService 方法？

Question

我在 ionic 4 中使用 GoogleMap cordova 插件，它工作正常。但是当我尝试安装 Google 地图功能以在打字稿中更好地工作时，我无法将地图对象传递给 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);

它正在工作。但是当我为打字稿安装 google map 并删除 => var google

的声明时

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

您可以使用本教程，可能对您有所帮助

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 但我认为使用地理编码（我不确定）我们必须再次获取地址。

如何将 cordova GoogleMap 分配给 Ionic 4 中的 java 脚本映射 PlacesService 方法？

how to assign cordova GoogleMap to java script map PlacesService method in Ionic 4?

google-maps

cordova-plugins

ionic4

google-places