หน้านี้อธิบายความแตกต่างระหว่างการค้นหาใกล้เคียงที่ใช้ในคลาส
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");
}
}
ดูข้อมูลเพิ่มเติม
- ดูโค้ดตัวอย่างฉบับสมบูรณ์
- ดูเอกสารประกอบสำหรับการค้นหาใกล้เคียง (ใหม่)
- ดู
searchNearby()
ข้อมูลอ้างอิง