Sınırlar için veri odaklı stil oluşturma ile birlikte Yerler API'lerini ve Coğrafi Kodlama'yı kullanma

Platform seçin: Android iOS JavaScript

Bölge 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. Zaten yer kimlikleri kullanıyorsanız bu kimlikleri, sınırlar için veriye dayalı stil ile kolayca yeniden kullanabilirsiniz.

Yerler ve Coğrafi Kodlama'yı Maps JavaScript API uygulamalarınıza aşağıdaki yöntemlerle ekleyin:

• Yerler Kitaplığı, Maps JavaScript API, uygulamanızın yer aramasını sağlar ve otomatik tamamlama widget'ı içerir.
• Places API, HTTP isteklerini kullanarak 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 ters coğrafi kodlama yapabilir.
• Geocoding API, bilinen statik adresleri coğrafi kodlamanıza olanak tanır.

Not: Geocoding API, Places API ve Places API (Yeni) (Metin Arama (Yeni) için) etkinleştirilmelidir ve Maps JavaScript API'den ayrı olarak faturalandırılır.

Places API'yi kullanma

Bölge bulmak için metin aramayı (yeni) 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 üzere Metin Arama (Yeni)'yi kullanabilirsiniz. Yalnızca yer kimlikleri istemek için Metin Arama (Yeni) API'sinin kullanımı ücretsizdir. Daha fazla bilgi edinin.

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;
        }
    };
}
index.ts

Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

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;
    }
  };
}
index.js

Örnek kaynak kodunun tamamını görme

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();
index.ts

Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

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();
index.js

Not: Önizleme sürümünde, proje başına saniyede en fazla 10 sorgu gönderebilirsiniz. Daha fazla bilgi edinin.

Bölgeleri bulmak için Places Otomatik Tamamlama'yı kullanma

Yerler Otomatik Tamamlama widget'ı, kullanıcılarınızın bölge aramasını kolaylaştırır. 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ö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ın özellik türünü alın (örneğin, locality).
• Amerika Birleşik Devletleri bölgesinde "Yer Adı, Eyalet, Ülke" olarak çözülen 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, place.geometry.viewport dahil olmak üzere yer ayrıntılarını almak için fetchFields()'ü, ardından haritayı seçili sınır poligonunda merkezlemek için map.fitBounds()'yi ç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 data fields you want.
        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'yi kullanma

Geocoding API, adresleri coğrafi koordinatlara ve koordinatları adrese dönüştürmenize olanak tanır. Aşağıdaki kullanım alanları, sınırlar için veri odaklı stilizasyonla iyi bir şekilde birleştirilebilir:

• Bir bölgenin görüntü alanını almak için Coğrafi Kodlama'yı 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.
• Enlem/boylam koordinatlarına göre yer kimliklerini bulmak için ters coğrafi kodlamayı kullanın veya belirli bir konumdaki tüm bileşenlerin yer kimliklerini döndürün.

Bir bölgenin görüntü alanını alma

Coğrafi kodlama hizmeti, bir yer kimliği alıp haritadaki bir sınır poligonuna yakınlaştırmak için map.fitBounds() işlevine iletebileceğiniz bir görüntü alanı döndürebilir. Aşağıdaki örnekte, görüntü alanı almak için Coğrafi Kodlama hizmetinin kullanılması ve ardından map.fitBounds() çağrısı 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 coğrafi kodlama hizmeti işlevi örneği, belirtilen enlem/boylam koordinatlarındaki tüm adres bileşenlerinin 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)
        });
}

Eşdeğer tersine coğrafi kodlama web hizmeti çağrısı aşağıda verilmiştir:

```html
https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930
```

Belirtilen konumda aşağıdaki türlerden en az birinin adres bileşenini almak için bileşen filtrelemeyle ters coğrafi kodlamayı kullanmak istiyorsanız:

• administrativeArea
• country
• locality
• postalCode

Aşağıdaki örnek işlevde, coğrafi kodlama hizmetinin kullanılması ve belirtilen konumdaki tüm adres bileşenlerini yalnızca locality türü için 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ıdır:

```html
    https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930&result_type=locality
```