kopia lustrzana https://github.com/paraboul/mapchecking
Fix search when pressing enter : trigger a place prediction call and get the first result
rodzic
428eda6641
commit
58b5ff8f80
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="w-full h-full">
|
<div class="w-full h-full">
|
||||||
<input ref="pacinput" id="pac-input" class="controls" :class="[mapLoaded ? '' : 'hidden']" type="text" placeholder="Search Box">
|
<input ref="pacinput" id="pac-input" class="controls" :class="[mapLoaded ? '' : 'hidden']" type="text" placeholder="Search a place">
|
||||||
<div class="w-full h-full" ref="mapel"></div>
|
<div class="w-full h-full" ref="mapel"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -62,14 +62,34 @@
|
||||||
const searchBox = new google.maps.places.Autocomplete(pacinput.value, {
|
const searchBox = new google.maps.places.Autocomplete(pacinput.value, {
|
||||||
fields: ['geometry']
|
fields: ['geometry']
|
||||||
})
|
})
|
||||||
// const searchBox = new google.maps.places.SearchBox(pacinput.value);
|
const service = new google.maps.places.AutocompleteService();
|
||||||
|
const placesService = new google.maps.places.PlacesService(currentMap)
|
||||||
|
|
||||||
currentMap.controls[google.maps.ControlPosition.LEFT_TOP].push(pacinput.value);
|
currentMap.controls[google.maps.ControlPosition.LEFT_TOP].push(pacinput.value);
|
||||||
|
|
||||||
searchBox.addListener('place_changed', () => {
|
searchBox.addListener('place_changed', async () => {
|
||||||
const place = searchBox.getPlace();
|
const place = searchBox.getPlace();
|
||||||
|
|
||||||
if (place.geometry?.location) {
|
if (place.geometry?.location) {
|
||||||
currentMap.setCenter(place.geometry.location);
|
currentMap.setCenter(place.geometry.location);
|
||||||
|
} else {
|
||||||
|
const sessionToken = new google.maps.places.AutocompleteSessionToken();
|
||||||
|
const rest = await service.getPlacePredictions({
|
||||||
|
input: place.name!,
|
||||||
|
sessionToken
|
||||||
|
})
|
||||||
|
|
||||||
|
placesService.getDetails({
|
||||||
|
sessionToken,
|
||||||
|
placeId: rest.predictions[0].place_id
|
||||||
|
}, (res) => {
|
||||||
|
if (!res?.geometry?.location) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
currentMap.setCenter(res.geometry.location);
|
||||||
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
currentMap.setZoom(17);
|
currentMap.setZoom(17);
|
||||||
|
|
Ładowanie…
Reference in New Issue