שימוש בממשקי API של מקומות ובקידוד גיאוגרפי עם סגנון מבוסס-נתונים להגדרת גבולות

בחירת פלטפורמה: Android iOS JavaScript

אפשר להשתמש ב-Places API וב-Geocoding API ב-Maps JavaScript API כדי לחפש אזורים ולקבל מידע נוסף על מקומות. Geocoding API ו-Places API הם חלופות חזקות ויציבות לקבלת מזהי מקומות. אם אתם כבר משתמשים במזהי מקומות, תוכלו להשתמש שוב במזהים האלה בקלות באמצעות עיצוב מבוסס-נתונים לגבולות.

אפשר להוסיף מקומות וקידוד גיאוגרפי לאפליקציות של Maps JavaScript 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

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).
  • מוצאים את הכתובת בפורמט המתאים, שמתחילה ב-'Place Name, State, Country' באזור של ארצות הברית (לדוגמה, '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

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

שימוש בהמרת קואורדינטות לכתובות (reverse geocoding)

אפשר להשתמש בקידוד גיאוגרפי הפוך כדי למצוא מזהי מקומות. בדוגמה הבאה, פונקציית השירות של שירותי הגיאוקוד מחזירה את מזהי המקומות של כל רכיבי הכתובת בקואורדינטות קווי הרוחב/אורך שצוינו:

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

זוהי קריאת ה-Web service המקבילה להמרת קואורדינטות לכתובות (reverse geocoding):

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