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

นักพัฒนาแอปในเขตเศรษฐกิจยุโรป (EEA)

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

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

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

PlacesService (เดิม) Place (ใหม่)
nearbySearch()
searchNearby()
PlaceSearchRequest SearchNearbyRequest
ต้องใช้ Callback เพื่อจัดการออบเจ็กต์ผลลัพธ์และ google.maps.places.PlacesServiceStatus การตอบกลับ ใช้ Promise และทำงานแบบไม่พร้อมกัน
ต้องมีการตรวจสอบ 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,
  });
}

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

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

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

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

ข้อมูลโค้ดต่อไปนี้แสดงฟังก์ชันที่ส่งคำขอ Nearby Search สำหรับร้านอาหาร ตัวอย่างนี้แสดงการใช้ตัวเลือก 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");
  }
}

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