ย้ายข้อมูลไปยังการค้นหาในบริเวณใกล้เคียงเวอร์ชันใหม่

หน้านี้จะอธิบายความแตกต่างระหว่างการค้นหาใกล้เคียงที่ใช้ในคลาส Place (ใหม่) กับคลาส PlacesService (เดิม) รวมถึงแสดงตัวอย่างโค้ดบางส่วนเพื่อเปรียบเทียบ

• PlacesService รุ่นเดิมมีเมธอด nearbySearch() ซึ่งให้คุณค้นหาสถานที่ภายในพื้นที่ที่ระบุตามคีย์เวิร์ดหรือประเภทได้
• คลาส Place มีเมธอด searchNearby() ที่ช่วยให้คุณค้นหาสถานที่ภายในพื้นที่ที่ระบุตามประเภทสถานที่ได้ โดยใช้ตัวเลือกที่หลากหลายของช่องข้อมูลสถานที่และประเภทสถานที่เพื่อให้มีความยืดหยุ่นมากขึ้น

ตารางต่อไปนี้แสดงความแตกต่างหลักๆ บางประการของวิธีการค้นหาใกล้เคียงระหว่างคลาส Place กับ PlacesService

PlacesService (เดิม)	Place (ใหม่)
nearbySearch()	searchNearby()
PlaceSearchRequest	SearchNearbyRequest
ต้องใช้การเรียกกลับเพื่อจัดการออบเจ็กต์ผลลัพธ์และgoogle.maps.places.PlacesServiceStatusการตอบกลับ	ใช้ Promises และทํางานแบบไม่พร้อมกัน
ต้องเลือกช่อง PlacesServiceStatus	ไม่ต้องมีการตรวจสอบสถานะ สามารถใช้การจัดการข้อผิดพลาดมาตรฐานได้
รองรับเฉพาะอคติด้านสถานที่ตั้ง	รองรับอคติด้านสถานที่และการจํากัดสถานที่
แสดงฟิลด์ข้อมูลที่มีอยู่ทั้งหมด (ชุดย่อยของฟิลด์ที่รองรับ) ไม่สามารถจํากัดเฉพาะฟิลด์ใดฟิลด์หนึ่ง	แสดงเฉพาะฟิลด์ข้อมูลสถานที่ที่ขอ คลาส Place มีตัวเลือกฟิลด์ที่ขยายและอัปเดตเป็นประจำ
จำกัดไว้ที่ชุดประเภทสถานที่ที่กำหนดไว้	เข้าถึงตัวเลือกประเภทสถานที่ที่ขยายการให้บริการและอัปเดตเป็นประจำ
การค้นหาแบบข้อความที่รองรับด้วยคีย์เวิร์ด	ระบบไม่รองรับการค้นหาแบบข้อความ ให้ใช้การค้นหาข้อความ (ใหม่) แทน

การเปรียบเทียบโค้ด

ส่วนนี้จะเปรียบเทียบโค้ดสำหรับวิธีการค้นหาใกล้เคียงเพื่อแสดงความแตกต่างระหว่างบริการ Places กับคลาส Place ตัวอย่างโค้ดแสดงโค้ดที่จําเป็นในแต่ละ API ที่เกี่ยวข้องเพื่อสร้างคําขอการค้นหาแบบข้อความ

การค้นหาในบริเวณใกล้เคียง (เดิม)

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

let map;
let service;

function initMap() {
  const sydney = new google.maps.LatLng(-33.867, 151.195);

  map = new google.maps.Map(document.getElementById("map"), {
    center: sydney,
    zoom: 15,
  });

  const request = {
    location: sydney,
    radius: '500',
    type: ['restaurant']
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

// Helper function to create markers.
function createMarker(place) {
  if (!place.geometry || !place.geometry.location) return;

  const marker = new google.maps.Marker({
    map,
    position: place.geometry.location,
    title: place.name,
  });
}

ดูข้อมูลเพิ่มเติม

• ดูเอกสารประกอบสำหรับ "การค้นหาในพื้นที่ใกล้เคียง" แบบเดิม
• ดูข้อมูลอ้างอิง searchNearby()

การค้นหาในบริเวณใกล้เคียง (ใหม่)

การค้นหาใกล้เคียงเวอร์ชันใหม่มีการปรับปรุงจากเวอร์ชันก่อนหน้าในด้านต่อไปนี้

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

ข้อมูลโค้ดต่อไปนี้แสดงฟังก์ชันที่ส่งคําขอการค้นหาใกล้เคียงสําหรับร้านอาหาร ตัวอย่างนี้แสดงการใช้ตัวเลือก rankPreference เพื่อจัดอันดับผลการค้นหาตามความนิยม (ในเวอร์ชันก่อนหน้าจะมีการระบุการจัดอันดับโดยใช้ตัวเลือก rankBy) เนื่องจากเมธอด searchNearby() ใช้โอเปอเรเตอร์ await จึงใช้ได้เฉพาะภายในฟังก์ชัน async

async function nearbySearch() {
  // Restrict within the map viewport.
  let center = new google.maps.LatLng(52.369358, 4.889258);
  const request = {
    // Required parameters.
    fields: ["displayName", "location", "businessStatus"],
    locationRestriction: {
      center: center,
      radius: 500,
    },
    // Optional parameters.
    includedPrimaryTypes: ["restaurant"],
    maxResultCount: 5,
    rankPreference: google.maps.places.SearchNearbyRankPreference.POPULARITY,
    language: "en-US",
    region: "us",
  };

  const { places } = await google.maps.places.Place.searchNearby(request);

  if (places.length) {
    console.log(places);

    // Create a new bounds, which will be extended with each result.
    const bounds = new google.maps.LatLngBounds();

    // Loop through and get all the results.
    places.forEach((place) => {
      const markerView = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: place.location,
        title: place.displayName,
      });

      bounds.extend(place.location);
      console.log(place);
    });
    map.fitBounds(bounds);
  } else {
    console.log("No results");
  }
}

ดูข้อมูลเพิ่มเติม

• ดูโค้ดตัวอย่างที่สมบูรณ์
• ดูเอกสารประกอบสําหรับการค้นหาในพื้นที่ใกล้เคียง (ใหม่)
• ดูข้อมูลอ้างอิง searchNearby()