mirror
/
mapchecking
kopia lustrzana https://github.com/paraboul/mapchecking
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Google Map: Use places.Autocomplete rather than SearchBox

pull/13/head
Anthony Catel 2022-04-26 09:05:04 +02:00
rodzic 1b8e97ed82
commit 77bff428c9
1 zmienionych plików z 9 dodań i 12 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

21
src/components/Map.vue
Wyświetl plik

@ -6,15 +6,15 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Loader as MapLoader } from '@googlemaps/js-api-loader'; import { Loader } from '@googlemaps/js-api-loader';
import { Base64 } from 'js-base64' import { Base64 } from 'js-base64'
import { onMounted, ref, watch, computed } from 'vue'; import { onMounted, ref, watch, computed } from 'vue';
import { watchDebounced } from '@vueuse/core' import { watchDebounced } from '@vueuse/core'
import { zlibSync, unzlibSync } from 'fflate'; import { zlibSync, unzlibSync } from 'fflate';
const DEFAULT_MAP_POSITION = [48.862895, 2.286978, 18] const DEFAULT_MAP_POSITION = [48.862895, 2.286978, 18]
const loader = new MapLoader({ const loader = new Loader({
apiKey: "AIzaSyD7Vm3gm4Fm7jSkuIh_yM14GmYhz1P_S4M", apiKey: "AIzaSyD7Vm3gm4Fm7jSkuIh_yM14GmYhz1P_S4M",
version: "3.48", version: "3.48",
libraries: ["geometry", "places"] libraries: ["geometry", "places"]
@ -57,17 +57,14 @@
gestureHandling: 'greedy' gestureHandling: 'greedy'
}); });
const searchBox = new google.maps.places.SearchBox(pacinput.value); const searchBox = new google.maps.places.Autocomplete(pacinput.value, {
fields: ['geometry']
})
// const searchBox = new google.maps.places.SearchBox(pacinput.value);
currentMap.controls[google.maps.ControlPosition.LEFT_TOP].push(pacinput.value); currentMap.controls[google.maps.ControlPosition.LEFT_TOP].push(pacinput.value);
searchBox.addListener('places_changed', () => { searchBox.addListener('place_changed', () => {
const places = searchBox.getPlaces(); const place = searchBox.getPlace();
if (!places || places.length == 0) {
return;
}
const place = places[0];
if (place.geometry?.location) { if (place.geometry?.location) {
currentMap.setCenter(place.geometry.location); currentMap.setCenter(place.geometry.location);