Yerler API'sini ve Coğrafi Kodlama API'sini kullanabilirsiniz. Haritalar JavaScript API'sini kullanarak bölge arayın ve bilgileri de ekler. Geocoding API ve Places API yer kimlikleri elde etmek için güçlü ve kararlı alternatiflerdir. Mevcut kullanarak bu kimlikleri sınırlar için veriye dayalı stillerle kolayca yeniden kullanabilirsiniz.
Maps JavaScript API uygulamalarınıza Yer ve Coğrafi Kodlama eklemek için şu yöntemleri kullanabilirsiniz:
- Yerler Kitaplığı, Maps JavaScript API, uygulamanızın yer aramasına olanak sağlar ve bir otomatik tamamlama widget'ı içerir.
- Yerler API'si HTTP isteklerini kullanan yerlerle ilgili bilgileri döndürür.
- Coğrafi kodlama hizmeti ve coğrafi kodlayıcı sınıfı, kullanıcı girişinden dinamik olarak coğrafi kodlama ve tersine coğrafi kodlama yapabilir.
- Coğrafi Kodlama API'si bilinen adreslerin coğrafi kodlamasını yapma.
Places API'yi kullanma
Bölge bulmak için Metin Arama (Yeni) özelliğini kullanma
Metin Arama (Yeni) özelliğini kullanabilirsiniz
belirtmek için includedType
kullanarak bölge verilerini içeren bir yer kimliği elde edin
bölge türünü
geri dönüyor. Yalnızca yer kimlikleri istemek için metin arama (yeni) API'sinin kullanımı ücretsizdir. Daha fazla bilgi
Bu örnek haritada, Trinidad, CA için yer kimliğini almak üzere bir searchByText
isteği yapılması ve ardından sınıra stil uygulanması 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ına bakın
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ölge aramasını kolaylaştırır. Yapılandırmak için
Yerler Otomatik Tamamlama widget'ını yalnızca bölgeleri döndürmek için, types
değerini şu şekilde ayarlayın:
(regions)
, aşağıdaki snippet'te gösterildiği gibi:
// 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ölgenin 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ıra yakınlaştırmak için görüntü alanını alın.
- Sınır için özellik türünü alın (örneğin
locality
). - ABD bölgesinde "Yer Adı, Eyalet, Ülke" olarak çözümlenen biçimlendirilmiş adresi alın (örneğin, "Ottumwa, IA, ABD").
- Fotoğraflar gibi diğer yararlı verileri alın.
Aşağıdaki örnek işlev, Trinidad, CA için sınırı bulur ve haritayı sonuç üzerinde merkezler:
Aşağıdaki örnek işlev, yer ayrıntılarını almak için fetchFields()
işlevini çağırır
place.geometry.viewport
dahil olmak üzere, ardından kullanıcıyı ortalamak için map.fitBounds()
haritasında görünü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 ve coğrafi koordinatları adreslere dönüştürmenize olanak tanır. Aşağıdaki kullanım alanları, sınırlar için veriye dayalı stil ile iyi bir uyum sağlar:
- Bir bölgenin görüntü alanını almak için Coğrafi Kodlama özelliğini kullanın.
- 1-4 idari bölgelerinin, yerleşim yerinin veya posta kodunun yer kimliklerini almak için Coğrafi Kodlama çağrınıza bileşen filtreleme uygulayın.
- Yer kimliklerini enlem/boylam koordinatlarına göre bulmak için tersine coğrafi kodlama kullanabilir veya hatta belirli bir konumdaki tüm bileşenler için yer kimlikleri döndürür.
Bir bölgenin görüntü alanını alma
Coğrafi Kodlama hizmeti, bir yer kimliği alabilir ve görüntü alanı döndürebilir.
map.fitBounds()
işlevini kullanın. Aşağıdaki örnekte, bir görüntü alanı almak için Coğrafi Kodlama hizmetinin kullanılması ve ardından map.fitBounds()
ç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)
});
}
Tersine coğrafi kodlama kullanma
Tersine coğrafi kodlama, yer kimliklerini bulmak için kullanılabilir. Aşağıdaki örnek Coğrafi Kodlama hizmet işlevi, belirtilen enlem/boylam koordinatları:
// 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ı:
https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930
Adres bileşenini almak amacıyla bileşen filtrelemeyle birlikte tersine coğrafi kodlama kullanmak için belirtilen konumda aşağıdaki türlerin biri veya daha fazlası için:
administrativeArea
country
locality
postalCode
Bir sonraki örnek işlevde, coğrafi kodlama hizmetinin kullanılması, yalnızca locality
türü için belirtilen konumdaki tüm adres bileşenlerini almak üzere ters coğrafi kodlama ile bileşen kısıtlamaları eklenmesi gösterilmektedir:
// 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ı:
https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930&result_type=locality