ย้ายข้อมูลไปยังรายละเอียดสถานที่แบบใหม่
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
นักพัฒนาแอปในเขตเศรษฐกิจยุโรป (EEA)
Places API สามารถแสดงข้อมูลโดยละเอียดเกี่ยวกับสถานที่ที่เฉพาะเจาะจงได้ หน้านี้
อธิบายความแตกต่างระหว่างรายละเอียดสถานที่ตามที่ใช้ในคลาส Place
(ใหม่) และ PlacesService
(เดิม) รวมถึงแสดงข้อมูลโค้ดบางส่วนเพื่อ
การเปรียบเทียบ ตารางต่อไปนี้แสดงความแตกต่างหลักบางประการในการใช้รายละเอียดสถานที่ระหว่างคลาส Place
กับ PlacesService
การเปรียบเทียบโค้ด
ส่วนนี้จะเปรียบเทียบโค้ด 2 รายการที่คล้ายกันเพื่อแสดงความแตกต่าง
ระหว่างบริการ Places กับ
คลาส Place ข้อมูลโค้ดแสดงโค้ด
ที่จำเป็นใน API แต่ละรายการเพื่อส่งคำขอรายละเอียดสถานที่ จากนั้นใช้
ข้อมูลสถานที่ที่ได้เพื่อเพิ่มเครื่องหมายลงในแผนที่
บริการสถานที่ (เดิม)
ข้อมูลโค้ดแบบย่อต่อไปนี้แสดงการส่งคำขอรายละเอียดสถานที่โดยใช้ PlacesService
คำขอใช้การเรียกกลับและมีการตรวจสอบแบบมีเงื่อนไขที่จำเป็นใน PlacesServiceStatus
ฟิลด์ข้อมูลสถานที่ที่จำเป็นจะ
ระบุไว้ในเนื้อหาคำขอ
function getPlaceDetails() {
// Instantiate the Places Service.
const service = new google.maps.places.PlacesService(map);
// Make a request using the Place ID.
const request = {
placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
fields: ["name", "formatted_address", "place_id", "geometry"],
};
// Request place details.
service.getDetails(request, (place, status) => {
// Check whether PlacesServiceStatus is OK.
if (
status === google.maps.places.PlacesServiceStatus.OK &&
place &&
place.geometry &&
place.geometry.location
) {
// Log the result.
console.log(place.name);
console.log(place.formatted_address);
// Add a marker for the place.
const marker = new google.maps.Marker({
map,
position: place.geometry.location,
title: place.name,
});
}
});
}
ดูข้อมูลเพิ่มเติม
คลาสสถานที่ (ใหม่)
ข้อมูลโค้ดแบบย่อต่อไปนี้แสดงการส่งคำขอรายละเอียดสถานที่โดยใช้คลาส Place
คำขอเป็นแบบอะซิงโครนัสและไม่มีการตรวจสอบสถานะ (ใช้การจัดการข้อผิดพลาดมาตรฐานได้) ระบบจะใช้รหัสสถานที่เพื่อสร้างอินสแตนซ์ Place
ใหม่ ซึ่งใช้เพื่อส่งคำขอ (fetchFields()
) ระบบจะไม่ส่งฟิลด์ข้อมูลสถานที่ที่จำเป็นจนกว่าจะเรียกใช้ fetchFields()
ซึ่งจะช่วยให้มีความยืดหยุ่นมากขึ้น เนื่องจากเมธอด fetchFields()
ใช้โอเปอเรเตอร์ await
จึงใช้ได้ภายในฟังก์ชัน async
เท่านั้น
async function getPlaceDetails() {
// Use place ID to create a new Place instance.
const place = new google.maps.places.Place({
id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
requestedLanguage: "en", // optional
});
// Call fetchFields, passing the needed data fields.
await place.fetchFields({
fields: ["displayName", "formattedAddress", "location"],
});
// Log the result.
console.log(place.displayName);
console.log(place.formattedAddress);
// Add an Advanced Marker.
const marker = new google.maps.marker.AdvancedMarkerElement({
map,
position: place.location,
title: place.displayName,
});
}
ดูข้อมูลเพิ่มเติม
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-08-31 UTC
[null,null,["อัปเดตล่าสุด 2025-08-31 UTC"],[],[],null,["# Migrate to the new Place Details\n\n\u003cbr /\u003e\n\n**European Economic Area (EEA) developers** If your billing address is in the European Economic Area, effective on 8 July 2025, the [Google Maps Platform EEA Terms of Service](https://cloud.google.com/terms/maps-platform/eea) will apply to your use of the Services. Functionality varies by region. [Learn more](/maps/comms/eea/faq).\n\nThe Places API can return detailed information about a specific place. This page\nexplains the differences between place details as used in the `Place` class\n(new) and `PlacesService` (legacy), and provides some code snippets for\ncomparison. The following table lists some of the main differences in the use of\nplace details between the `Place` class and `PlacesService`:\n\n| [`PlacesService`](/maps/documentation/javascript/reference/places-service) (Legacy) | [`Place`](/maps/documentation/javascript/reference/place) (New) |\n|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| [`getDetails()`](/maps/documentation/javascript/reference/places-service#PlacesService.getDetails) | [`fetchFields()`](/maps/documentation/javascript/reference/place#Place.fetchFields) |\n| [`PlaceDetailsRequest`](/maps/documentation/javascript/reference/places-service#PlaceDetailsRequest) | [`FetchFieldsRequest`](/maps/documentation/javascript/reference/place#FetchFieldsRequest) |\n| Methods require the use of a callback to handle the results object and `google.maps.places.PlacesServiceStatus` response. | Uses Promises, and works asynchronously. |\n| Methods require a `PlacesServiceStatus` check. | No required status check, can use standard error handling. [Learn more](/maps/documentation/javascript/reference/errors). |\n| [Place data fields](/maps/documentation/javascript/place-data-fields) are formatted using snake case. | [Place data fields](/maps/documentation/javascript/place-class-data-fields) are formatted using camel case. |\n| Limited to a fixed set of [place types](/maps/documentation/javascript/supported_types) and [place data fields](/maps/documentation/javascript/place-data-fields). | Provides an expanded selection of regularly updated [place types](/maps/documentation/javascript/place-types) and [place data fields](/maps/documentation/javascript/place-class-data-fields). |\n\nCode comparison\n---------------\n\nThis section compares two similar pieces of code to illustrate the differences\nbetween the Places Service and the\nPlace class. The code snippets show the code\nrequired on each respective API to make a place details request, and then use\nthe resulting place data to add a marker to the map.\n\n### Places Service (Legacy)\n\nThe following condensed code snippet shows making a place details request using\n`PlacesService`. The request uses a callback, and includes a required\nconditional check on `PlacesServiceStatus`. The needed place data fields are\nspecified in the request body. \n\n function getPlaceDetails() {\n // Instantiate the Places Service.\n const service = new google.maps.places.PlacesService(map);\n\n // Make a request using the Place ID.\n const request = {\n placeId: \"ChIJN1t_tDeuEmsRUsoyG83frY4\",\n fields: [\"name\", \"formatted_address\", \"place_id\", \"geometry\"],\n };\n\n // Request place details.\n service.getDetails(request, (place, status) =\u003e {\n // Check whether PlacesServiceStatus is OK.\n if (\n status === google.maps.places.PlacesServiceStatus.OK &&\n place &&\n place.geometry &&\n place.geometry.location\n ) {\n\n // Log the result.\n console.log(place.name);\n console.log(place.formatted_address);\n\n // Add a marker for the place.\n const marker = new google.maps.Marker({\n map,\n position: place.geometry.location,\n title: place.name,\n });\n }\n });\n }\n\n#### Learn more\n\n- [See the complete code example](/maps/documentation/javascript/examples/place-details)\n- [Place Details](/maps/documentation/javascript/places#place_details) documentation\n- [`getDetails` reference](/maps/documentation/javascript/reference/places-service#PlacesService.getDetails)\n\n### Place class (New)\n\nThe following condensed code snippet shows making a place details request using\nthe `Place` class. The request is asynchronous, and does not include a status\ncheck (standard error handling can be used). A place ID is used to create a new\n`Place` instance, which is used to make the request (`fetchFields()`). The\nneeded place data fields are not passed until `fetchFields()` is called, which\nlends greater flexibility. Because the `fetchFields()` method uses the await\noperator it can only be used inside an `async` function. \n\n async function getPlaceDetails() {\n // Use place ID to create a new Place instance.\n const place = new google.maps.places.Place({\n id: \"ChIJN5Nz71W3j4ARhx5bwpTQEGg\",\n requestedLanguage: \"en\", // optional\n });\n\n // Call fetchFields, passing the needed data fields.\n await place.fetchFields({\n fields: [\"displayName\", \"formattedAddress\", \"location\"],\n });\n\n // Log the result.\n console.log(place.displayName);\n console.log(place.formattedAddress);\n\n // Add an Advanced Marker.\n const marker = new google.maps.marker.AdvancedMarkerElement({\n map,\n position: place.location,\n title: place.displayName,\n });\n }\n\n#### Learn more\n\n- [See the complete code example](/maps/documentation/javascript/examples/place-class)\n- [Place Details](/maps/documentation/javascript/place-details) documentation\n- [`fetchFields()` reference](/maps/documentation/javascript/reference/place#Place.fetchFields)"]]