از Places API و Geocoding با استایل مبتنی بر داده برای مرزها استفاده کنید

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

توسعه‌دهندگان منطقه اقتصادی اروپا (EEA)

شما می‌توانید از Places API و Geocoding API در Maps JavaScript API برای جستجوی مناطق و کسب اطلاعات بیشتر در مورد مکان‌ها استفاده کنید. Geocoding API و Places API جایگزین‌های قدرتمند و پایداری برای به دست آوردن شناسه‌های مکان هستند. اگر از قبل از شناسه‌های مکان استفاده می‌کنید، می‌توانید به راحتی از آن شناسه‌ها با سبک‌دهی داده‌محور برای مرزها استفاده مجدد کنید.

مکان‌ها و ژئوکدینگ را به روش‌های زیر به برنامه‌های Maps JavaScript API خود اضافه کنید:

استفاده از API مکان‌ها

برای یافتن یک منطقه از جستجوی متنی (جدید) استفاده کنید

شما می‌توانید از جستجوی متنی (جدید) برای دریافت شناسه مکانی که شامل داده‌های منطقه است، با استفاده از includedType برای مشخص کردن نوع منطقه‌ای که باید برگردانده شود، استفاده کنید. استفاده از API جستجوی متنی (جدید) فقط برای درخواست شناسه‌های مکانی، هیچ هزینه‌ای نخواهد داشت. اطلاعات بیشتر .

این نقشه نمونه، ارسال یک درخواست searchByText برای دریافت شناسه مکان برای ترینیداد، کالیفرنیا، و سپس اعمال سبک به مرز را نشان می‌دهد:

تایپ اسکریپت 

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

جاوا اسکریپت 

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

کد منبع کامل مثال را ببینید

تایپ اسکریپت 

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

جاوا اسکریپت 

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

برای یافتن مناطق از تکمیل خودکار مکان‌ها استفاده کنید

ویجت Places Autocomplete روشی مناسب برای امکان جستجوی مناطق توسط کاربران شما فراهم می‌کند. برای پیکربندی ویجت Places Autocomplete برای بازگرداندن فقط مناطق، types روی (regions) تنظیم کنید، همانطور که در قطعه کد زیر نشان داده شده است:

// Set up the Autocomplete widget to return only region results.
const autocompleteOptions = {
  fields: ["place_id", "type"],
  strictBounds: false,
  types: ["(regions)"],
};

جزئیات مکان را برای یک منطقه دریافت کنید

داده‌های جزئیات مکان برای یک منطقه می‌تواند بسیار مفید باشد. برای مثال، می‌توانید:

  • جستجوی شناسه‌های مکان‌های مرزی بر اساس نام مکان‌ها.
  • برای بزرگنمایی روی یک مرز، نمای دید را دریافت کنید.
  • نوع ویژگی را برای مرز (مثلاً locality ) دریافت کنید.
  • آدرس قالب‌بندی‌شده را دریافت کنید، که در منطقه ایالات متحده به «نام مکان، ایالت، کشور» تبدیل می‌شود (برای مثال، «اوتوموا، آیووا، ایالات متحده آمریکا»).
  • اطلاعات مفید دیگری مانند عکس‌ها را دریافت کنید.

تابع مثال زیر مرز ترینیداد، کالیفرنیا را پیدا می‌کند و نقشه را روی نتیجه متمرکز می‌کند:

تابع مثال زیر تابع fetchFields() را برای دریافت جزئیات مکان از جمله place.geometry.viewport فراخوانی می‌کند، سپس تابع map.fitBounds() را برای قرار دادن نقشه در مرکز چندضلعی مرزی انتخاب شده فراخوانی می‌کند.

    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);
    }

استفاده از API کدگذاری جغرافیایی

API مربوط به Geocoding به شما امکان می‌دهد آدرس‌ها را به مختصات جغرافیایی و برعکس تبدیل کنید. کاربردهای زیر به خوبی با استایل‌دهی مبتنی بر داده برای مرزها ترکیب می‌شوند:

  • از Geocoding برای بدست آوردن نمای یک منطقه استفاده کنید.
  • فیلترینگ کامپوننت را روی فراخوانی Geocoding خود اعمال کنید تا شناسه‌های مکان را برای مناطق اداری ۱ تا ۴، محل یا کد پستی دریافت کنید.
  • از ژئوکدینگ معکوس برای یافتن شناسه‌های مکان بر اساس مختصات عرض/طول جغرافیایی استفاده کنید، یا حتی شناسه‌های مکان را برای همه اجزای یک مکان خاص برگردانید.

دریافت نمای دید برای یک منطقه

سرویس Geocoding می‌تواند یک شناسه مکان را دریافت کرده و یک viewport برگرداند، که می‌توانید آن را به تابع map.fitBounds() ارسال کنید تا روی یک چندضلعی مرزی روی نقشه زوم کنید. مثال زیر استفاده از سرویس Geocoding برای دریافت viewport و سپس فراخوانی map.fitBounds() را نشان می‌دهد:

// 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)
        });
}

استفاده از ژئوکدینگ معکوس

می‌توان از ژئوکدینگ معکوس برای یافتن شناسه‌های مکان استفاده کرد. تابع سرویس ژئوکدینگ مثال زیر، شناسه‌های مکان را برای تمام اجزای آدرس در مختصات عرض/طول جغرافیایی مشخص شده برمی‌گرداند:

// 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)
        });
}

فراخوانی معادل سرویس وب ژئوکدینگ معکوس به صورت زیر است:

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

برای استفاده از ژئوکدینگ معکوس با فیلترینگ مولفه برای دریافت مولفه آدرس برای یک یا چند نوع از انواع زیر در مکان مشخص شده:

  • administrativeArea
  • country
  • locality
  • postalCode

تابع مثال بعدی، استفاده از سرویس Geocoding را نشان می‌دهد که با استفاده از geocoding معکوس، محدودیت‌های مؤلفه را اضافه می‌کند تا تمام مؤلفه‌های آدرس را در مکان مشخص شده، فقط برای نوع locality دریافت کند: 

// 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)
        });
}

این معادل فراخوانی سرویس وب ژئوکدینگ معکوس است: 

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