Bölgeleri aramak ve yerler hakkında daha fazla bilgi edinmek için Maps JavaScript API'deki Places API'yi ve Geocoding API'yi kullanabilirsiniz. Geocoding API ve Places API, yer kimlikleri elde etmek için güçlü ve kararlı alternatiflerdir. Yer kimliklerini zaten kullanıyorsanız sınırlar için veriye dayalı stillerle bu kimlikleri kolayca yeniden kullanabilirsiniz.
Aşağıdaki yöntemleri kullanarak Maps JavaScript API uygulamalarınıza Yer ve Coğrafi Kodlama ekleyin:
- Yer Kitaplığı, Maps JavaScript API, uygulamanızın yerleri aramasına olanak tanır ve bir otomatik tamamlama widget'ı içerir.
- Places API, HTTP isteklerini kullanan yerler hakkında bilgi döndürür.
- Coğrafi kodlama hizmeti ve Coğrafi kodlayıcı sınıfı, kullanıcı girişinden coğrafi olarak coğrafi kodlama ve tersine coğrafi kodlama yapabilir.
- Geocoding API, bilinen statik adreslerin coğrafi kodlamasını yapmanıza olanak tanır.
Places API'yi kullanma
Bölge bulmak için Metin Arama (Yeni) özelliğini kullanma
Döndürülecek bölge türünü belirtmek için includedType
kullanarak bölge verilerini içeren bir yer kimliği almak için Metin Arama (Yeni) özelliğini kullanabilirsiniz. Text Search (Yeni) API'nin yalnızca yer kimliklerini istemek için kullanımı ücretsizdir. Daha fazla bilgi edinin.
Bu örnek haritada, Trinidad, CA için yer kimliğini almak amacıyla bir searchByText
isteğinde bulunduktan sonra sınıra stil uygulandığında gösterilmektedir:
TypeScript
async function findBoundary() { const request = { query: 'Trinidad, CA', fields: ['id', 'location'], includedType: 'locality', locationBias: center, }; const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; //@ts-ignore const { places } = await Place.searchByText(request); if (places.length) { const place = places[0]; styleBoundary(place.id); map.setCenter(place.location); } else { console.log('No results'); } } function styleBoundary(placeid) { // Define a style of transparent purple with opaque stroke. const styleFill = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: '#810FCB', fillOpacity: 0.5 }; // Define the feature style function. featureLayer.style = (params) => { if (params.feature.placeId == placeid) { return styleFill; } }; }
JavaScript
async function findBoundary() { const request = { query: "Trinidad, CA", fields: ["id", "location"], includedType: "locality", locationBias: center, }; const { Place } = await google.maps.importLibrary("places"); //@ts-ignore const { places } = await Place.searchByText(request); if (places.length) { const place = places[0]; styleBoundary(place.id); map.setCenter(place.location); } else { console.log("No results"); } } function styleBoundary(placeid) { // Define a style of transparent purple with opaque stroke. const styleFill = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: "#810FCB", fillOpacity: 0.5, }; // Define the feature style function. featureLayer.style = (params) => { if (params.feature.placeId == placeid) { return styleFill; } }; }
Örnek kaynak kodunun tamamını inceleyin
TypeScript
let map; let featureLayer; let center; async function initMap() { const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; center = {lat: 41.059, lng: -124.151}; // Trinidad, CA map = new Map(document.getElementById('map') as HTMLElement, { center: center, zoom: 15, // In the cloud console, configure this Map ID with a style that enables the // "Locality" Data Driven Styling type. mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>, }); featureLayer = map.getFeatureLayer('LOCALITY'); findBoundary(); } async function findBoundary() { const request = { query: 'Trinidad, CA', fields: ['id', 'location'], includedType: 'locality', locationBias: center, }; const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; //@ts-ignore const { places } = await Place.searchByText(request); if (places.length) { const place = places[0]; styleBoundary(place.id); map.setCenter(place.location); } else { console.log('No results'); } } function styleBoundary(placeid) { // Define a style of transparent purple with opaque stroke. const styleFill = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: '#810FCB', fillOpacity: 0.5 }; // Define the feature style function. featureLayer.style = (params) => { if (params.feature.placeId == placeid) { return styleFill; } }; } initMap();
JavaScript
let map; let featureLayer; let center; async function initMap() { const { Map } = await google.maps.importLibrary("maps"); center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA map = new Map(document.getElementById("map"), { center: center, zoom: 15, // In the cloud console, configure this Map ID with a style that enables the // "Locality" Data Driven Styling type. mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>, }); featureLayer = map.getFeatureLayer("LOCALITY"); findBoundary(); } async function findBoundary() { const request = { query: "Trinidad, CA", fields: ["id", "location"], includedType: "locality", locationBias: center, }; const { Place } = await google.maps.importLibrary("places"); //@ts-ignore const { places } = await Place.searchByText(request); if (places.length) { const place = places[0]; styleBoundary(place.id); map.setCenter(place.location); } else { console.log("No results"); } } function styleBoundary(placeid) { // Define a style of transparent purple with opaque stroke. const styleFill = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: "#810FCB", fillOpacity: 0.5, }; // Define the feature style function. featureLayer.style = (params) => { if (params.feature.placeId == placeid) { return styleFill; } }; } initMap();
Bölgeleri bulmak için Yerler Otomatik Tamamlama özelliğini kullanın
Yerler Otomatik Tamamlama widget'ı, kullanıcılarınızın bölgeleri aramasına olanak tanımak için kullanışlı bir yol sunar. Yerler Otomatik Tamamlama widget'ını yalnızca bölgeleri döndürecek şekilde yapılandırmak için aşağıdaki snippet'te gösterildiği gibi types
değerini (regions)
olarak ayarlayın:
// Set up the Autocomplete widget to return only region results.
const autocompleteOptions = {
fields: ["place_id", "type"],
strictBounds: false,
types: ["(regions)"],
};
Bir bölgenin yer ayrıntılarını alma
Bir bölgeye ait yer ayrıntıları verileri oldukça yararlı olabilir. Örneğin, şunları yapabilirsiniz:
- Yer adlarına göre sınır yer kimliklerini arayın.
- Bir sınırı yakınlaştırmak için görünümü alın.
- Sınır için özellik türünü alın (örneğin
locality
). - ABD bölgesinde "Yer Adı, Eyalet, Ülke" (ör. "Ottumwa, IA, ABD") olarak çözümlenen biçimlendirilmiş adresi alın.
- Fotoğraflar gibi başka faydalı verileri alabilirsiniz.
Aşağıdaki örnek işlev, Trinidad, CA'nın sınırını bulur ve haritayı sonuca göre ortalar:
Aşağıdaki örnek işlev, place.geometry.viewport
dahil yer ayrıntılarını almak için fetchFields()
yöntemini, ardından haritayı seçilen sınır poligonunda ortalamak için map.fitBounds()
yöntemini çağırır.
async function getPlaceDetails(placeId) {
// Use place ID to create a new Place instance.
const place = new google.maps.places.Place({
id: placeId,
});
// Call fetchFields, passing the desired data fields.
await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'geometry', 'type'] });
// Zoom to the boundary polygon.
let viewport = place.geometry.viewport;
map.fitBounds(viewport, 155);
// Print some place details to the console.
const types = place.types;
console.log("Feature type: " + types[0]);
console.log("Formatted address: " + place.formattedAddress);
}
Coğrafi Kodlama API'sini kullanma
Geocoding API, adresleri coğrafi koordinatlara veya coğrafi koordinatları adreslere dönüştürmenizi sağlar. Aşağıdaki kullanımlar, sınırlar için veriye dayalı stil ile bir araya gelir:
- Bir bölgenin görüntü alanını almak için Coğrafi Kodlama özelliğini kullanın.
- 1-4 numaralı yönetim alanları, yerel bölge veya posta kodu için yer kimliklerini almak üzere Coğrafi Kodlama çağrınıza bileşen filtreleme uygulayın.
- Yer kimliklerini enlem/boylam koordinatlarına göre bulmak veya belirli bir konumdaki tüm bileşenlerin yer kimliklerini döndürmek için tersine coğrafi kodlamayı kullanın.
Bir bölgenin görüntü alanını alma
Coğrafi Kodlama hizmeti, bir yer kimliği alıp bir görüntü alanı döndürebilir. Bu görünümü, harita üzerindeki bir sınır poligonunu yakınlaştırmak için map.fitBounds()
işlevine iletebilirsiniz. Aşağıdaki örnekte, görüntü alanı almak için Coğrafi Kodlama hizmetinin kullanılıp map.fitBounds()
işlevinin çağrılması gösterilmektedir:
// Set up the geocoder.
geocoder = new google.maps.Geocoder();
...
// Call Geocoding API and zoom to the resulting bounds.
function zoomToPolygon(placeid) {
geocoder
.geocode({ placeId: placeid })
.then(({ results }) => {
map.fitBounds(results[0].geometry.viewport, 155);
})
.catch((e) => {
console.log('Geocoder failed due to: ' + e)
});
}
Ters coğrafi kodlama kullanma
Yer kimliklerini bulmak için ters coğrafi kodlama kullanılabilir. Aşağıdaki örnek Coğrafi Kodlama hizmeti işlevi, belirtilen enlem/boylam koordinatlarındaki tüm adres bileşenleri için yer kimliklerini döndürür:
// Set up the geocoder.
geocoder = new google.maps.Geocoder();
...
// Call Geocoding API.
function getPlaceIds(latLng) {
geocoder
.geocode({ latLng })
.then(({ results }) => {
console.log('Geocoding result:');
console.log(results[0]);
console.log(results[0].place_id);
console.log(results[0].address_components);
})
.catch((e) => {
console.log('Geocoder failed due to: ' + e)
});
}
Bu, eşdeğer ters coğrafi kodlama web hizmeti çağrısıdır:
https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930
Aşağıdaki türlerin bir veya daha fazlası için belirtilen konumda adres bileşenini almak amacıyla bileşen filtrelemeyle tersine coğrafi kodlama kullanmak için:
administrativeArea
country
locality
postalCode
Sonraki örnek işlevde Coğrafi Kodlama hizmetinin kullanılması, yalnızca locality
türü için tüm adres bileşenlerini belirtilen konumda almak amacıyla ters coğrafi kodlamayla bileşen kısıtlamalarının eklendiğini göstermektedir:
// Set up the geocoder.
geocoder = new google.maps.Geocoder();
...
function getPlaceIdWithRestrictions(latLng) {
geocoder
.geocode({ latLng,
componentRestrictions: {
country: "US",
locality: "chicago",
},
})
.then(({ results }) => {
console.log('Geocoding result with restriction:');
console.log(results[0]);
console.log(results[0].place_id);
console.log(results[0].address_components);
console.log(results[0].address_components[1].types[0]);
console.log(results[0].address_components[1].long_name);
})
.catch((e) => {
console.log('getPlaceId Geocoder failed due to: ' + e)
});
}
Bu, eşdeğer ters coğrafi kodlama web hizmeti çağrısıdır:
https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930&result_type=locality