Places UI Kit
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
借助 Places UI Kit 组件库，您能够使用与 Places API 相同的数据，为应用和网页引入熟悉的 Google 地图地点用户体验。它包含一组可单独使用、一起使用以及与其他 Google Maps Platform API 结合使用的单个界面组件，可帮助您以最低的成本和最少的代码提供丰富的地点体验。
Places 界面套件包含以下用于呈现 Places 数据的 HTML 元素：
地点详情元素（地点详情和地点详情精简版）可呈现所选地点的营业时间、网站和评价等详细信息。
地点搜索元素（地点附近搜索和地点文本搜索）会呈现一个地点列表，以响应附近搜索或文本搜索查询。
基本地点自动补全元素会呈现一个文本输入字段，在界面选择列表中提供地点预测结果，并返回所选地点的地点 ID。
海拔（实验性）
将海拔数据呈现为单个点的数值，或呈现为路径的直观图表。
主要特性和功能
- 从最少的代码开始，融入 Google 的可信赖体验。
- 以低于 Places API 的成本将 Google 地图地点界面集成到您的应用中。
- 选择最符合您需求的数据和显示选项。
结算
无论 Places UI Kit 请求使用哪种搜索方法或返回哪些数据类型，系统始终会按照
Places UI Kit API 费率收取费用。例如，Places UI Kit 附近的地点搜索不会产生任何额外的 Places API 附近的地点搜索专业版费用。同样，Places UI Kit 地点详情请求可能会返回所选地点的照片、价格和评分，但您只需为 Places UI Kit 地点详情请求付费。
如未另行说明，那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可，并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情，请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC)：2025-08-29。
[null,null,["最后更新时间 (UTC)：2025-08-29。"],[[["\u003cp\u003eThe Places UI Kit offers pre-built UI components for integrating Google Maps Places functionality into your apps and web pages.\u003c/p\u003e\n"],["\u003cp\u003eIt includes components like Place Details, Place List, and Elevation for displaying place information and elevation data.\u003c/p\u003e\n"],["\u003cp\u003eThis kit is cost-effective compared to the Places API and allows customization of data and display options.\u003c/p\u003e\n"],["\u003cp\u003eThis product or feature is currently in the Experimental (pre-GA) phase, which means it has limited support and potential for incompatibility.\u003c/p\u003e\n"]]],[],null,["Select platform: [Android](/maps/documentation/places/android-sdk/places-ui-kit-overview \"View this page for the Android platform docs.\") [iOS](/maps/documentation/places/ios-sdk/places-ui-kit-overview \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/places-ui-kit/overview \"View this page for the JavaScript platform docs.\")\n\n\nThe Places UI Kit component library lets you bring the familiar Google Maps user experience for\nPlaces to your apps and web pages, using the same data that powers the Places API. It includes a\nset of individual UI components that can be used independently, together, and in conjunction with\nother Google Maps Platform APIs to deliver a Places-rich experience with minimal cost and code.\n\n\nThe Places UI Kit includes the following HTML elements for rendering Places data:\n- [Place Details Elements](/maps/documentation/javascript/places-ui-kit/place-details) (Place Details and Place Details Compact) render details such as opening hours, website, and reviews for a selected place.\n- [Place Search Elements](/maps/documentation/javascript/places-ui-kit/place-list) (Place Nearby Search and Place Text Search) render a list of places in response to either a nearby search or text search query.\n- [Basic Place Autocomplete Element](/maps/documentation/javascript/places-ui-kit/basic-autocomplete) renders a text input field, supplies place predictions in a UI pick list, and returns a place ID for the selected place.\n- [Elevation](/maps/documentation/javascript/places-ui-kit/elevation) (experimental) renders elevation data as a numerical value for a single point, or as a visual plot for a path.\n| **Tip:** The Places UI Kit offers extensive visual customization options at no extra charge. See [Places UI Kit Custom Styling](/maps/documentation/javascript/places-ui-kit/custom-styling) for more information.\n\nKey features and capabilities\n - Incorporate Google's trusted experience starting with minimal code.\n - Bring Google Maps UI for Places to your apps at a lower cost than the Places API.\n - Choose the data and display options that best suit your needs.\n\nBilling\n- Places UI Kit requests are always billed at the [Places UI Kit API rate](/maps/billing-and-pricing/sku-details#places_ui-kit-request-ess-sku), regardless of which search method they use or what data types they return. For example, a Places UI Kit Nearby Search won't incur any additional charges for Places API Nearby Search Pro. Similarly, a Places UI Kit Place Details request may return photos, price, and rating for a selected place, but you will only be billed for the Places UI Kit Place Details request.\n\nNext step:\n[Get started with the Places UI Kit](/maps/documentation/javascript/places-ui-kit/get-started)"]]
