बाउंड्री के लिए, डेटा-ड्रिवन स्टाइल के साथ Places API और जियोकोडिंग का इस्तेमाल करें

प्लैटफ़ॉर्म चुनें: iOS JavaScript

आप Places API और Geocoding API का इस्तेमाल कर सकते हैं में Google Maps JavaScript API का इस्तेमाल किया जा सकता है. जगहों के बारे में जानकारी. Geocoding API और Places API स्थान आईडी प्राप्त करने के लिए शक्तिशाली और स्थिर विकल्प हैं. अगर आप पहले से जगह आईडी का इस्तेमाल करके, आप सीमाओं के लिए डेटा-ड्रिवन स्टाइलिंग के साथ उन आईडी का फिर से इस्तेमाल कर सकते हैं.

इसमें अपने मैप JavaScript API ऐप्लिकेशन में स्थान और जियोकोडिंग जोड़ें इन तरीकों से मदद पाएं:

  • Location Library, Maps JavaScript API, आपके ऐप्लिकेशन को जगहें खोजने में मदद करता है. साथ ही, इसमें अपने-आप पूरा होने वाला विजेट भी शामिल होता है.
  • Location API एचटीटीपी अनुरोधों का इस्तेमाल करने वाली जगहों के बारे में जानकारी दिखाता है.
  • जियोकोडिंग सेवा और जियोकोडर क्लास जियोकोड कर सकता है और उपयोगकर्ता के इनपुट से डाइनैमिक तौर पर जियोकोड को उलटा करें.
  • जियोकोडिंग एपीआई की मदद से जियोकोड के स्टैटिक, जाने-पहचाने पते.

Places API का इस्तेमाल करना

कोई क्षेत्र ढूंढने के लिए, टेक्स्ट सर्च (नई सुविधा) का इस्तेमाल करना

इसके लिए, टेक्स्ट सर्च (नया) का इस्तेमाल करें का इस्तेमाल करके आप एक जगह का आईडी पा सकते हैं, जिसमें क्षेत्र का डेटा शामिल है. इसके लिए includedType का इस्तेमाल करें क्षेत्र का टाइप वापस जाने के लिए. Text Search (नया) एपीआई का इस्तेमाल सिर्फ़ अनुरोध किए गए जगह के आईडी पर कोई शुल्क नहीं लगेगा. ज़्यादा जानें.

इस उदाहरण में, जगह पाने के लिए 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

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

सोर्स कोड का पूरा उदाहरण देखें

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

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

क्षेत्र ढूंढने के लिए, जगहों के लिए ऑटोकंप्लीट की सुविधा का इस्तेमाल करना

जगहों की जानकारी के लिए ऑटोकंप्लीट विजेट आपके उपयोगकर्ताओं को क्षेत्र खोजने की सुविधा देता है. कॉन्फ़िगर करने के लिए केवल क्षेत्रों को लौटाने के लिए स्थान ऑटोकंप्लीट विजेट, 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").
  • काम के अन्य डेटा (जैसे, फ़ोटो) पाएं.

नीचे दिए गए उदाहरण फ़ंक्शन से त्रिनिदाद, कैलिफ़ोर्निया, और सेंटर की सीमा का पता चलता है परिणाम में मैप:

नीचे दिए गए उदाहरण में, जगह की जानकारी पाने के लिए 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 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 का इस्तेमाल करना

जियोकोडिंग एपीआई का इस्तेमाल करके पतों को भौगोलिक निर्देशांक में बदलना है. नीचे दिए गए सीमाओं के लिए डेटा-ड्रिवन स्टाइलिंग के साथ अच्छी तरह से कंबाइंड किया जा सकता है:

  • किसी इलाके का व्यूपोर्ट देखने के लिए, जियोकोडिंग का इस्तेमाल करें.
  • अपने जियोकोडिंग कॉल में कॉम्पोनेंट को फ़िल्टर करने की सुविधा लागू करें, ताकि आप इसके लिए जगह के आईडी पा सकें राज्य 1-4, शहर या पिन कोड.
  • जगह के आईडी को अक्षांश/देशांतर निर्देशांक के हिसाब से ढूंढने के लिए, रिवर्स जियोकोडिंग का इस्तेमाल करें या यहां तक कि किसी खास जगह के सभी कॉम्पोनेंट के लिए, जगह के आईडी भी दिखाएं.

किसी क्षेत्र का व्यूपोर्ट पाएं

जियोकोडिंग सेवा, जगह का आईडी ले सकती है और एक व्यूपोर्ट दिखा सकती है, जिसे map.fitBounds() को पास कर सकता है फ़ंक्शन का इस्तेमाल करें. यह उदाहरण दिखाता है जियोकोडिंग सेवा का इस्तेमाल करके व्यूपोर्ट पाएं, फिर 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

उदाहरण के तौर पर दिया गया अगला फ़ंक्शन, जियोकोडिंग सेवा का इस्तेमाल करके कॉम्पोनेंट जोड़ता है इसके साथ ही रिवर्स जियोकोडिंग के साथ प्रतिबंध है, जो कि सिर्फ़ 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