במסמך הזה נסביר איך להשתמש ב-Nearby Search (New) API כדי ליצור פתרון פשוט וחסכוני
חוויית הגילוי המקומית.
חוויית חיפוש מקומי מציגה למשתמשים מוקדי עניין עיקריים ליד מיקום מסוים שציינתם כשמחפשים מלון או נדל"ן. לרוב הוא כולל מפה אינטראקטיבית, עם חלונית נוספת שמכילה בוחר מקומות גלריית התמונות. תוצג לכם רשימה של מוצרים ויכולות שונים של פלטפורמת מפות Google, שיעזרו לכם לשפר את חוויית השימוש באמצעות אינטראקטיביות.
תרחישים לדוגמה
עכשיו נבין אילו רכיבים של השילוב של הגילוי המקומי תורמים לערך של המשתמשים:
גילוי – הצגת מקומות רלוונטיים מסוגים שונים כדי לתת למשתמשים סקירה כללית של מה שנמצא בסביבת מיקום מסוים.
אינטראקטיביות – נותנים למשתמשים אפשרות לבחור מקום ולרענן את הנתונים באופן דינמי
יחסית למקום הזה.
הצגה חזותית – הוספת ביקורות ותמונות על מקומות
וגם את משך ההליכה והמרחק, כדי שהמשתמשים יוכלו להבין במהירות אם המסלול מתאים לצרכים שלהם.
ארכיטקטורת עזר
חיפוש מקומי
יש דרכים רבות ליצור חוויית גילוי מקומית. השילוב הבא הוא דוגמה מותאמת אישית לחוויית משתמש שמשתמשת בממשקי API ידועים של הפלטפורמה של מפות Google, וגם בתכונות חדשות ומעניינות. אם אם רוצים להשתמש בתבנית ספציפית לגילוי מקומי, אפשר להשתמש ב רכיבים.
אפליקציה לדוגמה
הדרכה מפורטת לדוגמה
בטבלה הבאה מפורטת אפליקציית לדוגמה שמחולקת לשלבים, יחד עם תיאור ההטמעה הטכנית באמצעות ממשקי ה-API של פלטפורמת מפות Google.
1. חיפוש מיקום עם השלמה אוטומטית של חיפוש המיקום
- טוענים את Maps JavaScript API.
- שאילתת השלמה אוטומטית של מקומות או בחירת מיקום במפה.
2. הצגת מוקדי עניין מקומיים באמצעות Nearby Search (New) API
- דירוג פופולריות (תוצאות רלוונטיות יותר) או דירוג מרחק.
includedTypes
,excludedTypes
; אם מדובר במלון, אפשר להחריג את הסוג 'לינה' ולכלול רק סוגים מתאימים, למשל: 'מסעדה, בית קפה, פארק, אתר תיירות'.- מינוף של
includedPrimaryTypes
,excludedPrimaryTypes
יכול להניב עוד יותר לשלוט בתוצאות. - הגבלת מיקום כדי למנוע מספר לא מספיק של תוצאות או רחוק מדי מקומות ; במקרה של אפס תוצאות, הרחב את גודל העיגול / המלבן לפני כדי להציג תוצאות.
דוגמה לשאילתה כשמזמינים מלון עם שדות הנתונים המבוקשים:
- בסיסי (
displayName
,types
,openingHours
,formattedAddress
) - איש קשר (
websiteUri
,nationalPhoneNumber
,internationalPhoneNumber
) - מועדף (
reviews
,priceLevel
,userRatingCount
)
{ "includedTypes": ["restaurant","cafe","park"], "excludedTypes": ["lodging","convenience_store"], "includedPrimaryTypes": ["restaurant","tourist_attraction","airport"], "excludedPrimaryTypes": ["lodging"], "maxResultCount": 20, "locationRestriction": { "circle": { "center": { "latitude": 37.7937, "longitude": -122.3965 }, "radius": 500.0 } } }
דוגמה לשאילתה כשמחפשים נכס נדל"ן עם שדות הנתונים המבוקשים:
- בסיסי (
displayName
,types
,openingHours
,formattedAddress
)
{ "includedTypes": ["school","transport","bus","convenience_store"], "excludedTypes": ["lodging"], "includedPrimaryTypes": ["restaurant","tourist_attraction","airport"], "excludedPrimaryTypes": ["lodging"], "maxResultCount": 20, "locationRestriction": { "circle": { "center": { "latitude": 37.7937, "longitude": -122.3965 }, "radius": 500.0 } } }
3. הוספת אינטראקטיביות באמצעות 'מפות דינמיות' ו-'Directions API'
- שלבים וקטעים עדכניים באמצעות שאילתה ל-Directions API. * משתמשים בזמן בקטע הבא.
4. הצגת מידע מפורט על המקום במהלך האינטראקציה
תיאור:
displayName
,types
,rating
,userRatingCount
,priceLevel
.Time: מגיע משאילתה קודמת של Directions API.
ביקורות:
reviews[i].author
,reviews[i].rating
,reviews[i].text
.תמונות: במהלך התצוגה המקדימה ללא הגבלות של API לחיפוש בקרבת מקום (הגרסה החדשה), תצטרכו לשלוח שאילתה ל-Places Details עם
place.id
כדי לקבל את הערך photo_reference, ולאחר מכן לשלוח שאילתה לכל תמונה בנפרד.
מספר השאילתות והעלות המשויכת
- Maps JavaScript API: מפה אחת בזמן טעינת חוויית השימוש.
- Places השלמה אוטומטית API: שאילתה אחת כל תו שמוקלד (אם משתמשים ב- השלמה אוטומטית ווידג'ט), אפשר להתאים אותו אישית.
- חיפוש בקרבת מקום (חדש) API: שאילתה אחת לכל 20 מקומות מוצגים. חיוב שונה בהתאם לנתוני המיקום שמרכיבים את התשובה לשאילתה.
- Directions API: שאילתת API אחת לכל מקום שנבחר על ידי המשתמש.
- תמונה של מקום API: שאילתה אחת לכל תמונה שמוצגת.
סיכום
חוויית חיפוש מקומי היא דרך יעילה לספק ערך למשתמשים. הזה באמצעות הדגמה יש הרבה תכונות שאתם עשויים לכלול ביצירת חוויה כזו בפלטפורמה של מפות Google עם יכולות מיוחדות מ-Nearby Search (New) API .
השלבים הבאים
מקורות מידע נוספים:
- רכיבי אינטרנט ב-Maps JavaScript API
- אופטימיזציה להשלמה אוטומטית של מקומות
- שירותים אחרים של Places
- נשמח לקבל ממך משוב למטה.
תורמים
מחברים ראשיים:
תומאס אנגלרט | מפות Google מהנדסי פתרונות פלטפורמות