تفاصيل المكان (جديد)

اختيار النظام الأساسي: Android iOS JavaScript Web Service
المطوّرون في المنطقة الاقتصادية الأوروبية

وضع العنصر

يتم عرض العنصر Place بشكل ديناميكي، وهو يحتوي على معلومات حول مكان، وذلك من خلال خدمات "البحث النصي" و"البحث في الأماكن القريبة" و"الإكمال التلقائي للأماكن". يمكنك أيضًا إنشاء عنصر Place من رقم تعريف مكان أو اسم مورد (اسم المورد هو رقم تعريف المكان مسبوقًا بـ places/). توضّح المقتطفة التالية كيفية إنشاء عنصر Place باستخدام رقم تعريف مكان: 

// Use a place ID to create a new Place instance.
const place = new Place({
    id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
});

يمكنك أيضًا إنشاء كائن Place من اسم مرجع مكان: 

// Use a place resource name to create a new Place instance.
const place = new Place({
  resourceName: 'places/ChIJyYB_SZVU2YARR-I1JRF08F0', // San Diego Zoo
});

لمزيد من المعلومات، يُرجى الاطّلاع على PlaceOptions.

استرداد الحقول

إذا كان لديك عنصر Place حالي أو رقم تعريف مكان أو اسم مورد، استخدِم طريقة Place.fetchFields() للحصول على تفاصيل حول هذا المكان. قدِّم قائمة مفصولة بفواصل لحقول بيانات الأماكن المطلوب عرضها، وحدِّد أسماء الحقول بتنسيق camel case. استخدِم الكائن Place الذي تم عرضه للحصول على بيانات الحقول المطلوبة.

يستخدم المثال التالي معرّف مكان لإنشاء Place جديد، ويطلب Place.fetchFields() الحقلَين displayName وformattedAddress، ويضيف علامة إلى الخريطة.

TypeScript

async function getPlaceDetails() {
    const { Place } = (await google.maps.importLibrary(
        'places'
    )) as google.maps.PlacesLibrary;
    const { AdvancedMarkerElement } = (await google.maps.importLibrary(
        'marker'
    )) as google.maps.MarkerLibrary;
    // Use place ID to create a new Place instance.
    const place = new Place({
        id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
    });

    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({
        fields: [
            'displayName',
            'formattedAddress',
            'location',
            'googleMapsURI',
        ],
    });

    // Add an Advanced Marker
    const marker = new AdvancedMarkerElement({
        map: innerMap,
        position: place.location,
        title: place.displayName,
    });

    // Assemble the info window content.
    const content = document.createElement('div');
    const address = document.createElement('div');
    const placeId = document.createElement('div');
    address.textContent = place.formattedAddress || '';
    placeId.textContent = place.id;
    content.append(placeId, address);

    if (place.googleMapsURI) {
        const link = document.createElement('a');
        link.href = place.googleMapsURI;
        link.target = '_blank';
        link.textContent = 'View Details on Google Maps';
        content.appendChild(link);
    }

    // Display an info window.
    infoWindow.setHeaderContent(place.displayName);
    infoWindow.setContent(content);
    infoWindow.open({
        anchor: marker,
    });
}
index.ts

JavaScript

async function getPlaceDetails() {
    const { Place } = (await google.maps.importLibrary('places'));
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    // Use place ID to create a new Place instance.
    const place = new Place({
        id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
    });
    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({
        fields: [
            'displayName',
            'formattedAddress',
            'location',
            'googleMapsURI',
        ],
    });
    // Add an Advanced Marker
    const marker = new AdvancedMarkerElement({
        map: innerMap,
        position: place.location,
        title: place.displayName,
    });
    // Assemble the info window content.
    const content = document.createElement('div');
    const address = document.createElement('div');
    const placeId = document.createElement('div');
    address.textContent = place.formattedAddress || '';
    placeId.textContent = place.id;
    content.append(placeId, address);
    if (place.googleMapsURI) {
        const link = document.createElement('a');
        link.href = place.googleMapsURI;
        link.target = '_blank';
        link.textContent = 'View Details on Google Maps';
        content.appendChild(link);
    }
    // Display an info window.
    infoWindow.setHeaderContent(place.displayName);
    infoWindow.setContent(content);
    infoWindow.open({
        anchor: marker,
    });
}
index.js
يُرجى العِلم أنّه تم تعريف Map وPlace قبل هذه الدالة: 
const { Map } = await google.maps.importLibrary("maps");
const { Place } = await google.maps.importLibrary("places");
 الاطّلاع على المثال الكامل