استخدام واجهات برمجة تطبيقات الأماكن والترميز الجغرافي مع التصميم المستند إلى البيانات للحدود

يمكنك استخدام Places API وGeocoding API في Maps JavaScript API للبحث عن المناطق والحصول على المزيد من المعلومات عن الأماكن. واجهة برمجة تطبيقات Geocoding API و Places API هي بدائل قوية وثابتة للحصول على معرّفات الأماكن. إذا كنت تستخدم معرّفات الأماكن، يمكنك إعادة استخدام هذه المعرّفات بسهولة باستخدام أسلوب مستنِد إلى البيانات للحدود.

إضافة الأماكن والترميز الجغرافي إلى تطبيقات واجهة برمجة تطبيقات JavaScript للخرائط في الطرق التالية:

• مكتبة الأماكن، وواجهة برمجة تطبيقات JavaScript للخرائط، للسماح لتطبيقك بالبحث عن الأماكن، وتتضمّن أداة للإكمال التلقائي.
• تعرض Places API معلومات عن الأماكن باستخدام طلبات HTTP.
• خدمة الترميز الجغرافي يمكن أن تستخدم فئة الترميز الجغرافي الترميز الجغرافي والترميز الجغرافي العكسي ديناميكيًا من إدخال المستخدم.
• Geocoding API: الترميز الجغرافي للعناوين الثابتة والمعروفة

استخدام Places API

استخدام ميزة "البحث عن نص" (جديد) للعثور على منطقة

يمكنك استخدام ميزة البحث النصي (جديد) للحصول على رقم تعريف مكان يتضمّن بيانات المنطقة باستخدام includedType لتحديد نوع المنطقة للرجوع. استخدام واجهة برمجة التطبيقات للبحث النصي (الجديدة) من أجل لن يتم فرض أي رسوم على أرقام تعريف الأماكن المطلوبة فقط. مزيد من المعلومات

يوضح هذا المثال على الخريطة كيفية إجراء طلب 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

استخدام ميزة "الملء التلقائي للأماكن" للعثور على المناطق

توفّر أداة الإكمال التلقائي للأماكن طريقة ملائمة للسماح للمستخدمين بالبحث عن مناطق. للتهيئة أداة الإكمال التلقائي للأماكن لعرض المناطق فقط، مع ضبط 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 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)
        });
}

استخدام ميزة عكس الترميز الجغرافي

يمكن استخدام الترميز الجغرافي العكسي للعثور على معرّفات الأماكن. المثال التالي الترميز الجغرافي تعرض دالة الخدمة معرفات الأماكن لجميع مكونات العنوان في إحداثيات خط العرض/خط الطول المحددة:

// 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