kopia lustrzana https://github.com/paraboul/mapchecking
Porównaj commity
6 Commity
c6a0d63637
...
03339f4f0d
Autor | SHA1 | Data |
---|---|---|
Anthony Catel | 03339f4f0d | |
Anthony Catel | 15892c3e61 | |
Anthony Catel | 58b5ff8f80 | |
Anthony Catel | 428eda6641 | |
Anthony Catel | 73ba81e265 | |
Anthony Catel | b41b5b5303 |
28
package.json
28
package.json
|
@ -6,23 +6,23 @@
|
||||||
"build": "vite-ssg build"
|
"build": "vite-ssg build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/google.maps": "^3.50.4",
|
"@types/google.maps": "^3.52.3",
|
||||||
"@vitejs/plugin-vue": "^3.1.2",
|
"@vitejs/plugin-vue": "^4.1.0",
|
||||||
"@vueuse/core": "^9.3.1",
|
"@vueuse/core": "^9.13.0",
|
||||||
"fflate": "^0.7.4",
|
"fflate": "^0.7.4",
|
||||||
"js-base64": "^3.5.2",
|
"js-base64": "^3.7.5",
|
||||||
"tailwindcss": "^3.2.1",
|
"tailwindcss": "^3.2.7",
|
||||||
"tatween": "^0.2.0",
|
"tatween": "^0.2.0",
|
||||||
"vue": "^3.2.41"
|
"vue": "^3.2.47"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@googlemaps/js-api-loader": "^1.14.0",
|
"@googlemaps/js-api-loader": "^1.15.1",
|
||||||
"@vue/compiler-sfc": "^3.2.41",
|
"@vue/compiler-sfc": "^3.2.47",
|
||||||
"@vueuse/head": "^0.9.8",
|
"@vueuse/head": "^1.1.23",
|
||||||
"autoprefixer": "^10.4.12",
|
"autoprefixer": "^10.4.14",
|
||||||
"postcss": "^8.4.18",
|
"postcss": "^8.4.21",
|
||||||
"postcss-cli": "^10.0.0",
|
"postcss-cli": "^10.1.0",
|
||||||
"vite": "^3.1.8",
|
"vite": "^4.2.1",
|
||||||
"vite-ssg": "^0.21.1"
|
"vite-ssg": "^0.22.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
@ -18,7 +18,7 @@
|
||||||
|
|
||||||
const loader = new Loader({
|
const loader = new Loader({
|
||||||
apiKey: "AIzaSyD7Vm3gm4Fm7jSkuIh_yM14GmYhz1P_S4M",
|
apiKey: "AIzaSyD7Vm3gm4Fm7jSkuIh_yM14GmYhz1P_S4M",
|
||||||
version: "3.48",
|
version: "3.51",
|
||||||
libraries: ["geometry", "places"]
|
libraries: ["geometry", "places"]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -62,19 +62,39 @@
|
||||||
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);
|
||||||
|
currentMap.setZoom(17);
|
||||||
|
reset();
|
||||||
|
} 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);
|
||||||
|
|
||||||
reset();
|
reset();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
currentMap.addListener('bounds_changed', function() {
|
currentMap.addListener('bounds_changed', function() {
|
||||||
|
|
|
@ -105,14 +105,8 @@ how to remove the virtical space around the range input in IE*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.controls {
|
.controls {
|
||||||
margin-top: 10px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: 2px 0 0 2px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
height: 40px;
|
|
||||||
outline: none;
|
outline: none;
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
@apply shadow-md rounded-md h-10 mt-4 border
|
||||||
}
|
}
|
||||||
|
|
||||||
#pac-input {
|
#pac-input {
|
||||||
|
|
Ładowanie…
Reference in New Issue