如何在Ionic 4中将Cordova GoogleMap分配给JavaScript地图PlacesService方法?

huangapple go评论67阅读模式
英文:

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

问题

I'm using the GoogleMap Cordova plugin in Ionic 4, and it's working correctly. However, when I attempt to enhance the Google Maps functionality to work better in TypeScript by passing the map object to google.maps.places.PlacesService(), I encounter an issue.

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);

// When using placesService like this:
this.placesService = new google.maps.places.PlacesService(this.map);

It works, but when I installed Google Maps for TypeScript and removed the declaration of var google:

npm install @types/google-maps --save

I encountered this error:

Argument of type 'GoogleMap' is not assignable to a parameter of type 'HTMLDivElement | Map<Element>'.
placesServices does not accept this.map.

(Note: The code and error message have been translated from your provided text.)

英文:

i'm using GoogleMap cordova plugin in ionic 4, it's working right.
but when i try to install the Google Maps functionality to work better in typeScript i cant pass map object to google.map.place.placesService();

import { GoogleMap, GoogleMapOptions} from &#39;@ionic-native/google-maps/ngx&#39;;

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(&quot;gmap_Canvas&quot;, options);

when i use placesService like this:

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

it's working. but when i installed google map for typescript and remove declaration of => var google

npm install @types/google-maps --save

i got this error:

Argument of type &#39;GoogleMap&#39; is not assignable to parameter of type &#39;HTMLDivElement | Map&lt;Element&gt;&#39;.

placesServices not accepted this.map.

答案1

得分: 0

你可以使用这个教程,也许可以帮助你。

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

You can use this tutorial may this can help you

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

答案2

得分: 0

我放弃了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);
          });
      }
    });
}

最终我从这个方法获得了geocode:

getCoder(place: any) {

    this.places = [];

    const options: GeocoderRequest = {
      address: place.description
    };

    // 地址 -> 纬度,经度
    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,但使用geocode时,我认为(我不确定)我们必须再次获取地址。

英文:

I droped PlacesService and then pass the full Address from autoComplete to Google.geoCode

after map is loaded:

async loadMap(){
    ...
    this.autocompleteService = new google.maps.places.AutocompleteService();
}

searchPlace() {
    let config = {
        types: [&#39;geocode&#39;],
        input: this.query
    }

    this.autocompleteService.getPlacePredictions(config, (predictions, status) =&gt; {
      if (status === google.maps.places.PlacesServiceStatus.OK &amp;&amp; predictions) {

          this.places = [];

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

and finaly i got geocode from this method:

getCoder(place: any) {

    this.places = [];

    const options: GeocoderRequest = {
      address: place.description
    };

    // Address -&gt; latitude,longitude
    Geocoder.geocode(options).then((results: GeocoderResult[]) =&gt; {
      console.log(results);
      this.map.setCameraTarget(results[0].position);
    });

}

from html page:

&lt;ion-searchbar [(ngModel)]=&quot;query&quot; (ionInput)=&quot;searchPlace()&quot;&gt;&lt;/ion-searchbar&gt;

with PlaceService we had Place_id but with geocode i think(i'm not sure) we must get address again.

huangapple
  • 本文由 发表于 2020年1月3日 19:59:35
  • 转载请务必保留本文链接:https://go.coder-hub.com/59578260.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定