ขอแนะนำ Places UI Kit: ไลบรารีคอมโพเนนต์ราคาประหยัดที่พร้อมใช้งานซึ่งช่วยให้คุณนำ UI ของ Google Maps ที่คุ้นเคยสำหรับ Places ไปใช้กับแผนที่ใดก็ได้ที่คุณเลือก ลองใช้และ แชร์ความคิดเห็นเพื่อช่วยกำหนดอนาคตของ GMP

หน้านี้ได้รับการแปลโดย Cloud Translation API

ใช้ Places UI Kit สำหรับผู้ใช้ Places API เดิม

เป้าหมาย: แทนที่การใช้งาน Places API หรือคลาสสถานที่ด้วย Places UI Kit

คู่มือนี้มีไว้สำหรับใคร

นักพัฒนาแอปที่มีคุณสมบัติต่อไปนี้

ส่งคำขอ HTTP ไปยังปลายทางของ Places API (ใหม่หรือเดิม)
การใช้คลาส Place ภายใน Maps JavaScript API
การจัดการการตอบกลับ API เพื่อแสดงข้อมูลสถานที่ใน UI ของเว็บแอปพลิเคชัน

ข้อกำหนดเบื้องต้น

เปิดใช้ Places UI Kit ในโปรเจ็กต์ Google Cloud คุณใช้คีย์ API ที่มีอยู่ต่อไปหรือสร้างคีย์ใหม่สำหรับ Places UI Kit ก็ได้ ดูข้อมูลเพิ่มเติมได้ที่ใช้คีย์ API รวมถึงการจำกัดคีย์

อัปเดตการโหลด Maps JavaScript API

Places UI Kit ต้องใช้เมธอดDynamic Library Import ในการโหลด Maps JavaScript API หากคุณใช้แท็กการโหลดสคริปต์โดยตรง คุณต้องอัปเดตแท็กนี้

เมื่ออัปเดตสคริปต์การโหลดสำหรับ Maps JavaScript API แล้ว ให้นำเข้า ไลบรารีที่จำเป็น เพื่อใช้ Places UI Kit

ติดตั้งใช้งานองค์ประกอบรายละเอียดสถานที่

องค์ประกอบรายละเอียดสถานที่ และองค์ประกอบรายละเอียดสถานที่แบบย่อ คือองค์ประกอบ HTML ที่แสดงรายละเอียดของสถานที่

การใช้งานปัจจุบัน

คุณโทรหา Place Details ได้โดยใช้คำขอ HTTP หรือใช้คลาสสถานที่ของ JavaScript API
คุณจะแยกวิเคราะห์การตอบกลับของ API และแสดงรายละเอียดสถานที่โดยใช้ HTML และ CSS

การย้ายข้อมูลไปยังองค์ประกอบรายละเอียดสถานที่

แก้ไขโครงสร้าง HTML

ระบุคอนเทนเนอร์ HTML ที่แสดงรายละเอียดสถานที่ แทนที่องค์ประกอบ HTML ที่กำหนดเอง (div, span สำหรับชื่อ ที่อยู่ รูปภาพ ฯลฯ) ด้วย HTML ขององค์ประกอบรายละเอียดสถานที่

โดยมี 2 องค์ประกอบให้เลือก ดังนี้

องค์ประกอบขนาดกะทัดรัดของรายละเอียดสถานที่
องค์ประกอบรายละเอียดสถานที่

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

HTML ที่มีอยู่อาจมีลักษณะดังนี้

<div id="my-place-details-container">
    <h2 id="place-name"></h2>
    <p id="place-address"></p>
    <img id="place-photo" src="" alt="Place photo">
    <!-- ... more custom elements -->
</div>

ตัวอย่าง HTML ใหม่ที่ระบุอย่างชัดเจนว่าต้องการแสดงเนื้อหาใด

<gmp-place-details-compact orientation="horizontal" truncation-preferred style="display: none;">
    <gmp-place-details-place-request></gmp-place-details-place-request>
    <gmp-place-content-config>
        <gmp-place-media lightbox-preferred></gmp-place-media>
        <gmp-place-address></gmp-place-address>
        <gmp-place-rating></gmp-place-rating>
        <gmp-place-type></gmp-place-type>
        <gmp-place-price></gmp-place-price>
        <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
        <gmp-place-open-now-status></gmp-place-open-now-status>
    </gmp-place-content-config>
</gmp-place-details-compact>

ปรับตรรกะ JavaScript

ตรรกะที่มีอยู่

ลอจิกที่มีอยู่อาจเกี่ยวข้องกับสิ่งต่อไปนี้

การดึงข้อมูลรหัสสถานที่
การใช้ PlacesService().getDetails() หรือการเรียกใช้เว็บเซอร์วิส
การระบุอาร์เรย์ฟิลด์ (สำหรับ JS API) หรือ FieldMask (สำหรับเว็บเซอร์วิส) เพื่อขอข้อมูลที่เฉพาะเจาะจง
ในการแก้ปัญหาการเรียกกลับ ให้เลือกองค์ประกอบ HTML ด้วยตนเองและ ป้อนข้อมูลที่ได้รับ

ตัวอย่างต่อไปนี้แสดงวิธีที่คุณอาจใช้รายละเอียดสถานที่

async function getPlaceDetails(placeId) {
    const { Place } = await google.maps.importLibrary('places');
    // Use place ID to create a new Place instance.
    const place = new Place({
        id: placeId
    });
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location'],
    });
    // Log the result
    console.log(place.displayName);
    console.log(place.formattedAddress);
}

ตรรกะใหม่

ตรรกะใหม่ของคุณจะมีลักษณะดังนี้

ดึงข้อมูลรหัสสถานที่หรือออบเจ็กต์สถานที่
รับการอ้างอิงไปยังองค์ประกอบ <gmp-place-details-place-request>
ส่งรหัสสถานที่หรือออบเจ็กต์สถานที่ไปยังพร็อพเพอร์ตี้สถานที่ในองค์ประกอบ <gmp-place-details-place-request>

ตัวอย่างต่อไปนี้แสดงวิธีติดตั้งใช้งาน UI Kit ของรายละเอียดสถานที่ใน ตรรกะ JavaScript รับการอ้างอิงไปยังองค์ประกอบรายละเอียดสถานที่ หากมี อยู่ ให้รับการอ้างอิงไปยังองค์ประกอบคำขอสถานที่ของรายละเอียดสถานที่ และตั้งค่าพร็อพเพอร์ตี้ สถานที่โดยใช้รหัสสถานที่ ในโค้ด HTML ตัวอย่างด้านบน รูปแบบขององค์ประกอบรายละเอียดสถานที่ ตั้งค่าเป็น display: none ซึ่งอัปเดตเป็น display: block

function displayPlaceDetailsWithUIKit(placeId) {
  const placeDetailsElement = document.querySelector('gmp-place-details-compact');
  if (placeDetailsElement) {
    const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
    // Configure the element with the Place ID
    placeDetailsRequest.place = placeId
    placeDetailsElement.style.display = 'block';
    console.log("PlaceDetailsElement configured for place:", placeId);
  } else {
    console.error("PlaceDetailsElement not found in the DOM.");
  }
}

// Example usage:
const placeId = 'ChIJC8HakaIRkFQRiOgkgdHmqkk';
displayPlaceDetailsWithUIKit(placeId);

ใช้ Place Search Element

องค์ประกอบการค้นหาสถานที่คือองค์ประกอบ HTML ที่แสดงผลการค้นหาสถานที่ในรายการ

การใช้งานปัจจุบัน

คุณทำการค้นหาข้อความหรือการค้นหาใกล้เคียงโดยใช้คำขอ HTTP หรือใช้คลาสสถานที่ของ JavaScript API
คุณระบุพารามิเตอร์การค้นหา ข้อจำกัดหรืออคติของสถานที่ ประเภท และ ฟิลด์ที่ขอโดยใช้ FieldMask
คุณจะแยกวิเคราะห์การตอบกลับของ API วนซ้ำอาร์เรย์ของสถานที่ และ สร้างรายการ HTML ด้วยตนเอง

การย้ายข้อมูลไปยังองค์ประกอบการค้นหาสถานที่

แก้ไขโครงสร้าง HTML

ระบุคอนเทนเนอร์ HTML ที่คุณแสดงรายการสถานที่ แทนที่องค์ประกอบ HTML ที่กำหนดเอง (div, span สำหรับชื่อ ที่อยู่ ฯลฯ) ด้วยองค์ประกอบ HTML ของ Place Search Element

HTML ที่มีอยู่อาจมีลักษณะดังนี้

<div id="search-results-area">
    <h3>Nearby Places:</h3>
    <ul id="manual-places-list">
        <!-- JavaScript would dynamically insert list items here -->
        <!-- Example of what JS might generate:
    <li class="place-entry" data-place-id="SOME_PLACE_ID_1">
      <img class="place-icon" src="icon_url_1.png" alt="Icon">
      <span class="place-name">Place Name One</span> -
      <span class="place-vicinity">123 Main St</span>
    </li>
    <li class="place-entry" data-place-id="SOME_PLACE_ID_2">
      <img class="place-icon" src="icon_url_2.png" alt="Icon">
      <span class="place-name">Place Name Two</span> -
      <span class="place-vicinity">456 Oak Ave</span>
    </li>
    -->
        <li class="loading-message">Loading places...</li>
    </ul>
</div>

องค์ประกอบการค้นหาสถานที่นำมาใช้โดยใช้คอมโพเนนต์ <gmp-place-search> หากต้องการกำหนดค่าประเภทการค้นหา ให้ใส่คอมโพเนนต์การกำหนดค่าแบบสล็อตต่อไปนี้อ��า��่าง��นึ่งไว้ด้านใน

<gmp-place-text-search-request> สำหรับการค้นหาด้วยข้อความ
<gmp-place-nearby-search-request> เพื่อค้นหาในบริเวณใกล้เคียง

หากต้องการกำหนดวิธีแสดงผลลัพธ์ คุณสามารถใช้<gmp-place-all-content> แป้นพิมพ์ลัด หรือระบุชุดคอมโพเนนต์การนำเสนอแต่ละรายการของคุณเอง คุณตั้งค่าแอตทริบิวต์หลัก เช่น selectable (เพื่ออนุญาตให้คลิกรายการในลิสต์) และ orientation (สําหรับเลย์เอาต์แนวนอนหรือแนวตั้ง) ได้โดยตรงในคอมโพเนนต์ระดับบนสุด

ตัวอย่างการค้นหาในบริเวณใกล้เคียง

<gmp-place-search orientation="horizontal" selectable>
    <gmp-place-all-content> </gmp-place-all-content>
    <gmp-place-nearby-search-request></gmp-place-nearby-search-request>
</gmp-place-search>

ตัวอย่างการค้นหาข้อความ

<gmp-place-search orientation="horizontal" selectable>
  <gmp-place-all-content> </gmp-place-all-content>
  <gmp-place-text-search-request></gmp-place-text-search-request>
</gmp-place-search>

ปรับตรรกะ JavaScript

ใน JavaScript ให้รับการอ้างอิงไปยังคอมโพเนนต์ตัวควบคุมการค้นหาโดยใช้ document.querySelector() ซึ่งจะขึ้นอยู่กับการตั้งค่าของคุณ โดยอาจเป็นองค์ประกอบ <gmp-place-text-search-request>หรือ <gmp-place-nearby-search-request>

จากนั้นตั้งค่าพร็อพเพอร์ตี้ในตัวควบคุมนี้เพื่อกำหนดการค้นหา พร็อพเพอร์ตี้ที่จำเป็นต้องใช้จะขึ้นอยู่กับประเภทการค้นหาที่คุณดำเนินการ

สำหรับการค้นหาข้อความ (<gmp-place-text-search-request>) พร็อพเพอร์ตี้หลักคือ textQuery

const textSearchController = document.querySelector('gmp-place-text-search-request');
textSearchController.textQuery = 'museums in London';

สำหรับการค้นหาในบริเวณใกล้เคียง (<gmp-place-nearby-search-request>) คุณต้องกำหนด พื้นที่ค้นหาโดยใช้ locationRestriction จากนั้นคุณจะใช้ includedTypes เพื่อ กรองสถานที่บางประเภทภายในพื้นที่นั้นได้

const nearbySearchController = document.querySelector('gmp-place-nearby-search-request');
nearbySearchController.locationRestriction = new google.maps.Circle({
    center: { lat: 51.5190, lng: -0.1347 },
    radius: 1000
});
nearbySearchController.includedTypes = ['restaurant'];

<gmp-place-search>คอมโพเนนต์ระดับบนสุดจะเริ่มการค้นหาใหม่โดยอัตโนมัติ ทันทีที่มีการตั้งค่าพร็อพเพอร์ตี้ที่จำเป็นของตัวควบคุม

สำหรับการค้นหาข้อความ การค้นหาจะทำงานทันทีที่คุณกำหนดค่าให้กับ textQuery
สำหรับการค้นหาใกล้เคียง ระบบจะทำการค้นหาหลังจากที่ระบุ locationRestriction ที่ถูกต้องแล้ว

ใช้ Place Autocomplete Element พื้นฐาน

สำหรับนักพัฒนาแอปที่ต้องการประสบการณ์การค้นหาโดยไม่มี UI ของ Place Search Element ที่ให้มา Basic Place Autocomplete Element จะพร้อมใช้งาน

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

โดยจะไม่แสดงรายละเอียดใดๆ ด้วยตัวเอง หรือให้ข้อมูลอื่นๆ ที่เข้าถึงได้โดยโปรแกรม

การใช้งานปัจจุบัน

ลอจิกที่มีอยู่อาจเกี่ยวข้องกับสิ่งต่อไปนี้

การแสดงช่องป้อนข้อความในหน้าเว็บซึ่งเรียกใช้การเติมข้อความอัตโนมัติของสถานที่เมื่อผู้ใช้พิมพ์และแสดงผลลัพธ์
ใช้รหัสสถานที่ของสถานที่ที่ผู้ใช้เลือกเพื่อดึงรายละเอียดเพิ่มเติม เช่น ใช้ Place Details API
แสดงรายละเอียดของสถานที่ที่เลือก

การย้ายข้อมูลไปยังองค์ประกอบ Place Autocomplete

แก้ไขโครงสร้าง HTML

ระบุและนำองค์ประกอบ HTML ที่คุณแนบวิดเจ็ตการเติมข้อความอัตโนมัติออก ซึ่งน่าจะใช้ช่องป้อนข้อมูล HTML มาตรฐาน

<input id="pac-input" type="text" placeholder="Search for a location" />

ตัวอย่าง HTML ใหม่ที่ใช้แนวทางคอมโพเนนต์ของเว็บเพื่อเริ่มต้นองค์ประกอบการเติมข้อความอัตโนมัติของสถานที่พื้นฐานในหน้าเว็บ

<gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>

ปรับตรรกะ JavaScript

ตรรกะ JavaScript ของคุณน่าจะเกี่ยวข้องกับการสร้างวิดเจ็ตการเติมข้อความอัตโนมัติที่แนบมากับองค์ประกอบ input HTML จากนั้นวิดเจ็ตนี้จะรอรับplace_changed เหตุการณ์ ซึ่งจะทริกเกอร์การดำเนินการด้วยข้อมูลที่ส่งคืน

ตัวอย่าง JavaScript ที่มีอยู่ซึ่งต้องนำออก

// Get the input element
const input = document.getElementById("pac-input");

// Create the Autocomplete widget instance
const autocomplete = new google.maps.places.Autocomplete(input, {
  fields: ["place_id", "geometry", "name"]
});

// Add a listener for the 'place_changed' event
autocomplete.addListener("place_changed", () => {
  // Your logic to get and display place information
  console.log(place.place_id);
});

ตรรกะ JavaScript ใหม่จะได้รับการอ้างอิงถึง Basic Place Autocomplete Element และรอรับเหตุการณ์ gmp-select

const placeAutocomplete = document.querySelector('gmp-basic-place-autocomplete');

placeAutocomplete.addEventListener('gmp-select', (event) => {
  console.log(event.place);
});

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

การปรับแต่งแฮนเดิล

การปรับแต่งองค์ประกอบรายละเอียดสถานที่

การวางแนว

แสดงผลองค์ประกอบรายละเอียดสถานที่ได้ทั้งในแนวนอนและแนวตั้ง ใช้แอตทริบิวต์ orientation ใน gmp-place-details-compact เพื่อ เลือกระหว่างแนวตั้งและแนวนอน เช่น

<gmp-place-details-compact orientation="vertical">

เลือกช่องที่จะแสดง

ใช้องค์ประกอบเนื้อหาเพื่อระบุเนื้อหาที่จะแสดงภายในองค์ประกอบรายละเอียดสถานที่ เช่น การยกเว้นองค์ประกอบเนื้อหา <gmp-place-type> จะหยุดการแสดงผลองค์ประกอบรายละเอียดสถานที่ของประเภทสถานที่ที่เลือก ดูรายการองค์ประกอบเนื้อหาทั้งหมดได้ใน PlaceContentConfigElement เอกสารประกอบอ้างอิง

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

ตั้งค่าสไตล์ CSS

คุณสมบัติ CSS ที่กำหนดเองพร้อมให้ใช้งานเพื่อกำหนดค่าสีและแบบอักษรขององค์ประกอบ ตัวอย่างเช่น หากต้องการตั้งค่าพื้นหลังขององค์ประกอบเป็นสีเขียว ให้ตั้งค่าพร็อพเพอร์ตี้ CSS ต่อไปนี้

gmp-place-details-compact {
  --gmp-mat-color-surface: green;
}

ดูรายละเอียดเพิ่มเติมได้ในเอกสารอ้างอิงสำหรับ PlaceDetailsCompactElement

การปรับแต่งองค์ประกอบการค้นหาสถานที่

การวางแนว

แสดงผลองค์ประกอบการค้นหาสถานที่ได้ทั้งในแนวนอนและแนวตั้ง ใช้แอตทริบิวต์ orientation ใน <gmp-place-search> เพื่อเลือก ระหว่างแนวตั้งและแนวนอน เช่น

<gmp-place-search orientation="horizontal" selectable>

เลือกช่องที่จะแสดง

ใช้องค์ประกอบเนื้อหาเพื่อระบุเนื้อหาที่จะแสดงภายในองค์ประกอบการค้นหาสถานที่ คุณสามารถใช้องค์ประกอบ <gmp-place-all-content> เพื่อแสดงเนื้อหาทั้งหมด หรือใช้แท็ก HTML ที่เลือกเพื่อกำหนดค่าเนื้อหาที่แสดงผล

การใส่ <gmp-place-address> ภายใน <gmp-place-content-config> จะแสดงที่อยู่ของแต่ละสถานที่เท่านั้น เช่น

<gmp-place-search orientation="horizontal" selectable>
  <gmp-place-content-config>
    <gmp-place-address></gmp-place-address>
  </gmp-place-content-config>
  <gmp-place-text-search-request></gmp-place-text-search-request>
</gmp-place-search>

การปรับแต่งองค์ประกอบ Place Autocomplete ขั้นพื้นฐาน

ตั้งค่าสไตล์ CSS

คุณสมบัติ CSS ที่กำหนดเองพร้อมให้ใช้งานเพื่อปรับแต่งรูปลักษณ์ และลักษณะการทำงานขององค์ประกอบการเติมข้อความอัตโนมัติ เช่น หากต้องการตั้งค่าสีพื้นหลังเป็นสีม่วงอ่อน คุณจะต้อง ตั้งค่าพร็อพเพอร์ตี้ background-color ในองค์ประกอบ

gmp-basic-place-autocomplete {
  background-color: #d993e6;
}

ดูรายละเอียดเพิ่มเติมได้ในเอกสารอ้างอิงของ BasicPlaceAutocompleteElement

จัดการเหตุการณ์และข้อมูล

องค์ประกอบ UI Kit ของ Places เป็นคอมโพเนนต์แบบอินเทอร์แอกทีฟที่ช่วยให้คุณฟัง เหตุการณ์และดึงข้อมูลแบบเป็นโปรแกรมได้

ฟังเหตุการณ์

คุณเพิ่มเครื่องมือฟังเหตุการณ์ลงในองค์ประกอบเพื่อทริกเกอร์การทำงานตามการโต้ตอบของผู้ใช้หรือสถานะขององค์ประกอบได้

เหตุการณ์การเลือก

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

เหตุการณ์ทั่วไป

องค์ประกอบการค้นหาสถานที่ รายละเอียดสถานที่ และ Place Autocomplete พื้นฐานทั้งหมด รองรับเหตุการณ์ต่อไปนี้

gmp-load: ทริกเกอร์เมื่อองค์ประกอบและเนื้อหาโหลดและแสดงผลเสร็จแล้ว
gmp-requesterror: ทริกเกอร์เมื่อคำขอไปยังเซิร์ฟเวอร์ล้มเหลว เช่น เนื่องจากคีย์ API ไม่ถูกต้อง

เข้าถึงข้อมูลองค์ประกอบแบบเป็นโปรแกรม

คุณสามารถดึงข้อมูลที่เฉพาะเจาะจงจากองค์ประกอบได้โดยอัตโนมัติหลังจากที่มีการโต้ตอบหรือโหลดองค์ประกอบแล้ว

สำหรับองค์ประกอบการค้นหาสถานที่และองค์ประกอบรายละเอียดสถานที่ คุณสามารถดึงข้อมูลต่อไปนี้ได้
- รหัสสถานที่
- สถานที่ (ละติจูดและลองจิจูด)
- วิวพอร์ต
สำหรับองค์ประกอบการเติมข้อความอัตโนมัติของสถานที่พื้นฐาน คุณสามารถดึงข้อมูลต่อไปนี้ได้
- รหัสสถานที่

ส่วนข้อมูลอื่นๆ ทั้งหมดที่อยู่ในองค์ประกอบจะเข้าถึงแบบเป็นโปรแกรมไม่ได้

ดูตัวอย่างโดยละเอียดเพิ่มเติมได้ที่เอกสารประกอบสำหรับองค์ประกอบ Place Search, องค์ประกอบ Place Details และองค์ประกอบการเติมข้อความอัตโนมัติของสถานที่พื้นฐาน

เมื่อผสานรวมองค์ประกอบ Places UI Kit แล้ว การทดสอบเป็นสิ่งสำคัญเพื่อให้การเปลี่ยนผ่านเป็นไปอย่างราบรื่นและผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี การทดสอบควรครอบคลุมส่วนสำคัญหลายส่วน โดยจัดการกับองค์ประกอบทั้งหมดที่คุณได้ติดตั้งใช้งาน ได้แก่ องค์ประกอบรายละเอียดสถานที่ การค้นหาสถานที่ และ Place Autocomplete พื้นฐาน

องค์ประกอบรายละเอียดสถานที่

สำหรับองค์ประกอบรายละเอียดสถานที่ ให้เริ่มด้วยการยืนยันว่ารายละเอียดแสดงอย่างถูกต้องสำหรับสถานที่ที่หลากหลาย ทดสอบโดยส่งรหัสสถานที่ต่างๆ ไปยัง.placeพร็อพเพอร์ตี้ขององค์ประกอบ <gmp-place-details-place-request> ใช้รหัสที่แสดงถึงประเภทสถานประกอบการต่างๆ (ธุรกิจที่มีข้อมูลที่สมบูรณ์ จุดที่น่าสนใจ ที่อยู่พื้นฐาน) และสถานที่ในภูมิภาคหรือ ภาษาต่างๆ โปรดใส่ใจกับการจัดรูปแบบ เลย์เอาต์ และการแสดงเนื้อหา อย่างใกล้ชิด

องค์ประกอบการค้นหาสถานที่

หากคุณได้ติดตั้งใช้งานองค์ประกอบการค้นหาสถานที่แล้ว ให้ตรวจสอบการแสดงผลและ ลักษณะการทำงานภายใต้สถานการณ์การค้นหาต่างๆ

สำหรับการค้นหาข้อความ ให้ทดสอบโดยตั้งค่าพร็อพเพอร์ตี้ textQuery ในองค์ประกอบ <gmp-place-text-search-request> ด้วยอินพุตต่างๆ ได้แก่ คำค้นหาแบบกว้าง ที่อยู่เฉพาะ และคำค้นหาที่มีอคติทางภูมิศาสตร์
สำหรับการค้นหาใกล้เคียง ให้ทดสอบโดยตั้งค่าพร็อพเพอร์ตี้ locationRestriction และ includedTypes ในองค์ประกอบ <gmp-place-nearby-search-request> ใช้ตัวกรองขนาดและประเภทสถานที่ตั้งที่แตกต่างกัน

ยืนยันว่ารายการแสดงผลลัพธ์ที่เกี่ยวข้อง และgmp-select เหตุการณ์ทํางานอย่างถูกต้องเมื่อเลือก

องค์ประกอบ Place Autocomplete พื้นฐาน

สําหรับองค์ประกอบการเติมข้อความอัตโนมัติของสถานที่พื้นฐาน ให้มุ่งเน้นการทดสอบที่การโต้ตอบของผู้ใช้และ ข้อมูลที่ส่งผ่านเหตุการณ์การเลือก ยืนยันว่าgmp-selectเหตุการณ์ จะทริกเกอร์อย่างน่าเชื่อถือเมื่อผู้ใช้คลิกการคาดคะเน ตรวจสอบว่าevent.place ออบเจ็กต์ในตัวแฮนเดิลเหตุการณ์มีรหัสสถานที่ที่ถูกต้อง

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

การจัดการข้อผิดพลาด

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

คู่มือนี้มีไว้สำหรับใคร

ข้อกำหนดเบื้องต้น

อัปเดตการโหลด Maps JavaScript API

ติดตั้งใช้งานองค์ประกอบรายละเอียดสถานที่

การใช้งานปัจจุบัน

การย้ายข้อมูลไปยังองค์ประกอบรายละเอียดสถานที่

แก้ไขโครงสร้าง HTML

ปรับตรรกะ JavaScript

ตรรกะที่มีอยู่

ตรรกะใหม่

ใช้ Place Search Element

การใช้งานปัจจุบัน

การย้ายข้อมูลไปยังองค์ประกอบการค้นหาสถานที่

แก้ไขโครงสร้าง HTML

ตัวอย่างการค้นหาในบริเวณใกล้เคียง

ตัวอย่างการค้นหาข้อความ

ปรับตรรกะ JavaScript

ใช้ Place Autocomplete Element พื้นฐาน

การใช้งานปัจจุบัน

การย้ายข้อมูลไปยังองค์ประกอบ Place Autocomplete

แก้ไขโครงสร้าง HTML

ปรับตรรกะ JavaScript

การปรับแต่งแฮนเดิล

การปรับแต่งองค์ประกอบรายละเอียดสถานที่

การวางแนว

เลือกช่องที่จะแสดง

ตั้งค่าสไตล์ CSS

การปรับแต่งองค์ประกอบการค้นหาสถานที่

การวางแนว

เลือกช่องที่จะแสดง

การปรับแต่งองค์ประกอบ Place Autocomplete ขั้นพื้นฐาน

ตั้งค่าสไตล์ CSS

จัดการเหตุการณ์และข้อมูล

ฟังเหตุการณ์

เหตุการณ์การเลือก

เหตุการณ์ทั่วไป

เข้าถึงข้อมูลองค์ประกอบแบบเป็นโปรแกรม

การทดสอบและการปรับแต่ง