องค์ประกอบการค้นหาสถานที่ขั้นสูง (ตัวอย่าง)

AdvancedPlaceSearchElement เป็นองค์ประกอบ HTML ที่แสดงผลการค้นหาสถานที่เป็นรายการ คุณกำหนดค่าองค์ประกอบ gmp-advanced-place-search ได้ 2 วิธี ดังนี้

ทั้งการค้นหาสถานที่ใกล้เคียงและการค้นหาตามข้อความมี ฟีเจอร์ขั้นสูงเหมือนกัน ซึ่งรวมถึงการปรับแต่ง ปุ่มการดำเนินการ การกรองรีวิวและสื่อ การกำหนดค่าการแสดงที่มาของสถานที่ และการจัดการการเลือกสถานที่และข้อผิดพลาด

คำขอค้นหาสถานที่ใกล้เคียง

เลือกประเภทสถานที่จากเมนูเพื่อดูผลการค้นหาสถานที่ใกล้เคียงสำหรับสถานที่ประเภทนั้น

การค้นหาสถานที่ใกล้เคียงได้รับการกำหนดค่าให้ค้นหาตามประเภทสถานที่และสถานที่ตั้งเป็นหลัก และสามารถจัดอันดับผลการค้นหาตามระยะทางหรือความนิยมได้โดยใช้ rankPreference พร็อพเพอร์ตี้ ดูรายละเอียดเพิ่มเติมได้ในเอกสารอ้างอิงคลาส PlaceNearbySearchRequestElement

ตัวอย่างนี้แสดงคอมโพเนนต์การค้นหาสถานที่ขั้นสูงเพื่อตอบสนองต่อการค้นหาสถานที่ใกล้เคียงที่มีประเภทสถานที่ที่ผู้ใช้เลือก นอกจากนี้ยังแสดง AdvancedPlaceDetailsCompactElement สำหรับสถานที่ที่เลือกด้วย

หากต้องการเพิ่มคอมโพเนนต์การค้นหาสถานที่ขั้นสูงลงใน Maps ให้เพิ่มองค์ประกอบ gmp-advanced-place-search ที่มีองค์ประกอบ gmp-place-nearby-search-request แบบซ้อนกันลงในหน้า HTML 

<gmp-advanced-place-search selectable>
    <!-- Nearby search requests require a location restriction to return results. Often set programmatically. -->
    <gmp-place-nearby-search-request max-result-count="5"></gmp-place-nearby-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

องค์ประกอบ select ช่วยให้ผู้ใช้เลือกประเภทสถานที่จาก เมนูได้ เราแสดงประเภทสถานที่ไว้เพียง 3 ประเภท ได้แก่ ร้านอาหาร คาเฟ่ และสถานีชาร์จ EV เพื่อความเรียบง่าย 

<div class="controls">
    <label for="type-select">
        Select a place type:
        <select id="type-select" class="type-select">
            <option value="restaurant">Restaurant</option>
            <option value="cafe" selected>Cafe</option>
            <option value="electric_vehicle_charging_station">
                EV charging station
            </option>
        </select>
    </label>
</div>

เมื่อผู้ใช้เลือกประเภทสถานที่จากเมนู องค์ประกอบ gmp-place-nearby-search-request จะได้รับการอัปเดต และคอมโพเนนต์ การค้นหาสถานที่ขั้นสูงจะแสดงผลการค้นหา

คำขอค้นหาตามข้อความ

ป้อนข้อความค้นหาในช่องป้อนข้อมูล แล้วคลิกปุ่มค้นหา เพื่อ ดูรายการสถานที่ที่ตรงกับข้อความดังกล่าว

การค้นหาตามข้อความได้รับการกำหนดค่าให้ค้นหาโดยใช้คำค้นหาแบบข้อความและ สถานที่ตั้งเป็นหลัก และสามารถปรับแต่งผลการค้นหาตามระดับราคา คะแนน และสถานะเปิดให้บริการในปัจจุบัน นอกจากนี้ยังสามารถจัดอันดับผลการค้นหาตามระยะทางหรือความนิยมได้ โดยใช้พร็อพเพอร์ตี้ rankPreference ดูรายละเอียดเพิ่มเติมได้ในเอกสารอ้างอิงคลาส PlaceTextSearchRequestElement

ตัวอย่างนี้แสดงคอมโพเนนต์การค้นหาสถานที่ขั้นสูงเพื่อตอบสนองต่อข้อความที่ผู้ใช้ ป้อน นอกจากนี้ยังแสดง AdvancedPlaceDetailsCompactElement สำหรับสถานที่ที่เลือกด้วย

หากต้องการเพิ่มคอมโพเนนต์การค้นหาสถานที่ขั้นสูงลงใน Maps ให้เพิ่มองค์ประกอบ gmp-advanced-place-search ที่มีองค์ประกอบ gmp-place-text-search-request แบบซ้อนกันลงในหน้า HTML 

<gmp-advanced-place-search selectable>
    <gmp-place-text-search-request max-result-count="5"></gmp-place-text-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

องค์ประกอบ input ช่วยให้ผู้ใช้ป้อนข้อความค้นหาได้ 

<div class="controls">
    <input
        type="text"
        id="query-input"
        class="query-input"
        placeholder="Search for a place"
        value="cafe" />
    <button id="search-button" class="search-button">
        Search
    </button>
</div>

เมื่อผู้ใช้คลิกปุ่มค้นหา ฟังก์ชันการค้นหาจะทำงาน องค์ประกอบ gmp-place-text-search-request จะได้รับการอัปเดต และ คอมโพเนนต์การค้นหาสถานที่ขั้นสูงจะแสดงผลการค้นหา

ฟีเจอร์ขั้นสูง

ปรับแต่งปุ่มการดำเนินการ

เพิ่มปุ่มการดำเนินการเป็นองค์ประกอบย่อยภายในองค์ประกอบ <template slot="place-list-item"> ของคอมโพเนนต์การค้นหาสถานที่ขั้นสูง ใช้ <gmp-place-link> สำหรับการเชื่อมต่อการนำทางมาตรฐาน และระบุแอตทริบิวต์ action อย่างชัดเจน คุณจะระบุแอตทริบิวต์ slot ก็ได้ การดำเนินการที่กำหนดไว้ล่วงหน้าที่ถูกต้องคือ open-website, open-directions, open-map, และ call หากละเว้นแอตทริบิวต์ slot ระบบจะใช้ค่าเริ่มต้นเป็น action-main 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
    <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
  </template>
</gmp-advanced-place-search>

กรองรีวิวและสื่อ

ตัวอย่างโค้ดนี้แสดงเฉพาะสื่อและรีวิวที่พูดถึง "กาแฟ"

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-search>

กำหนดค่าการแสดงที่มาของสถานที่

หากต้องการกำหนดค่าการแสดงที่มาแบบภาพ ให้เพิ่มองค์ประกอบ <gmp-place-attribution> เพื่อแสดงการกำหนดค่าการแสดงที่มาของข้อมูล Maps API โดยรวม เช่น แหล่งที่มาของรูปภาพหรือรีวิว โดยต้องเพิ่มเป็นองค์ประกอบระดับเดียวกันกับ <template> ระบบจะละเว้นการแสดงที่มาที่วาง ไว้ภายใน องค์ประกอบ <template> 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
  </template>
  <gmp-place-attribution light-scheme-color="black" dark-scheme-color="gray"></gmp-place-attribution>
</gmp-advanced-place-search>

จัดการการเลือกสถานที่และข้อผิดพลาด

เมื่อมีแอตทริบิวต์ selectable คุณจะรอรับเหตุการณ์ gmp-select เพื่อดึงสถานที่ที่ผู้ใช้เลือกได้ นอกจากนี้ คุณยัง รอรับเหตุการณ์ gmp-error เพื่อจัดการสถานการณ์อย่างเหมาะสม เมื่อดึงข้อมูลสถานที่ไม่ได้ 

const searchElement = document.querySelector('gmp-advanced-place-search');

searchElement.addEventListener('gmp-select', (e) => {
  console.log('User selected place: ', e.place);
});

searchElement.addEventListener('gmp-error', (e) => {
  // e.detail contains the structured error payload
  console.error('Failed to load places: ', e.detail.error);
});