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

اختَر النظام الأساسي: iOS JavaScript

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

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

استخدام Places API

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

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

توضّح هذه الخريطة كيفية إجراء طلب 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).
  • يمكنك الحصول على العنوان المنسَّق الذي يتم تحويله إلى "اسم المكان، الولاية، البلد" في منطقة الولايات المتحدة (على سبيل المثال، "أوتوموا، آيوا، الولايات المتحدة الأمريكية").
  • الحصول على بيانات مفيدة أخرى مثل الصور

تعثر الدالة التالية في المثال حدود ترينيداد، كاليفورنيا، وتجعل الخريطة وفقًا للنتيجة:

تستدعي الدالة في المثال التالي 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() لتكبير مضلّع الحدود على الخريطة. يوضّح المثال التالي استخدام خدمة Geocoding للحصول على إطار عرض، ثم استدعاء 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