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

پلتفرم را انتخاب کنید: Android iOS JavaScript

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

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

  • کتابخانه مکان‌ها، Maps JavaScript API ، به برنامه شما امکان می‌دهد مکان‌ها را جستجو کند و شامل یک ویجت تکمیل خودکار است.
  • Places API اطلاعات مکان‌هایی را با استفاده از درخواست‌های HTTP برمی‌گرداند.
  • سرویس ژئوکدینگ و کلاس Geocoder می توانند ژئوکد را به صورت پویا از ورودی کاربر معکوس کنند.
  • Geocoding API به شما امکان می دهد آدرس های استاتیک و شناخته شده را ژئوکد کنید.

از Places API استفاده کنید

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

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

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

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

جاوا اسکریپت 

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

نمونه کامل کد منبع را ببینید

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

جاوا اسکریپت 

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 استفاده کنید

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

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

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

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

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

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

تابع مثال زیر برای دریافت جزئیات مکان از جمله place.geometry.viewport ، fetchFields() را فراخوانی می کند، سپس 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 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);
    }

از Geocoding API استفاده کنید

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

  • از Geocoding برای دریافت نمای یک منطقه استفاده کنید.
  • برای دریافت شناسه مکان برای مناطق اداری 1-4، محله، یا کد پستی، فیلتر مؤلفه را در تماس 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)
        });
}

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

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

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

  • administrativeArea
  • country
  • locality
  • postalCode

تابع مثال بعدی استفاده از سرویس 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)
        });
}

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

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