英文:
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 '@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 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 'GoogleMap' is not assignable to parameter of type 'HTMLDivElement | Map<Element>'.
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: ['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);
});
}
});
and finaly i got geocode from this method:
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);
});
}
from html page:
<ion-searchbar [(ngModel)]="query" (ionInput)="searchPlace()"></ion-searchbar>
with PlaceService we had Place_id but with geocode i think(i'm not sure) we must get address again.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论