Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Các tính năng dựa trên WebGL của Maps JavaScript API cho phép bạn kiểm soát độ nghiêng và hướng xoay, thêm trực tiếp các đối tượng 3D vào bản đồ, v.v. Bao gồm các tính năng sau:
Chế độ xem lớp phủ WebGL cho phép bạn thêm đồ hoạ 2D và 3D tuỳ chỉnh cũng như nội dung động vào bản đồ.
Giờ đây, bạn có thể điều chỉnh độ nghiêng và hướng theo cách lập trình, cũng như bằng cách sử dụng các cử chỉ chuột và bàn phím.
map.moveCamera() cho phép bạn thay đổi đồng thời nhiều thuộc tính của camera.
Lựa chọn renderingType sẽ ghi đè mọi chế độ cài đặt loại kết xuất do việc định cấu hình mã bản đồ tạo ra.
Để bật chế độ nghiêng và xoay, hãy đặt tuỳ chọn tiltInteractionEnabled của bản đồ thành true hoặc gọi map.setTiltInteractionEnabled.
Để bật tính năng di chuyển, hãy đặt lựa chọn bản đồ headingInteractionEnabled thành true hoặc gọi map.setHeadingInteractionEnabled.
Sử dụng mã bản đồ để đặt loại kết xuất
Bạn cũng có thể chỉ định loại kết xuất bằng cách sử dụng mã bản đồ. Để tạo mã bản đồ mới, hãy làm theo các bước trong phần Sử dụng tính năng tạo kiểu bản đồ dựa trên đám mây – Lấy mã bản đồ. Nhớ đặt loại Bản đồ thành JavaScript và chọn tuỳ chọn Vectơ. Chọn Nghiêng hoặc Xoay để bật chế độ nghiêng và xoay trên bản đồ. Khi đó, bạn có thể điều chỉnh các giá trị này theo phương thức lập trình, đồng thời cho phép người dùng điều chỉnh độ nghiêng và hướng trực tiếp trên bản đồ. Nếu việc sử dụng độ nghiêng hoặc hướng sẽ ảnh hưởng tiêu cực đến ứng dụng của bạn, hãy bỏ đánh dấu Độ nghiêng và Xoay để người dùng không thể điều chỉnh độ nghiêng và hướng.
Tiếp theo, hãy cập nhật mã khởi chạy bản đồ bằng mã bản đồ mà bạn đã tạo. Bạn có thể tìm thấy mã bản đồ của mình trên trang Quản lý Maps. Cung cấp mã bản đồ khi bạn tạo bản đồ bằng cách sử dụng thuộc tính mapId như minh hoạ ở đây:
Theo mặc định, bản đồ vectơ, độ nghiêng và hướng được bật khi bạn sử dụng phần tử <gmp-map>. Phần tử này cho phép bạn thêm bản đồ vào trang bằng HTML. Tìm hiểu thêm.
Ví dụ
Chúng tôi đã cung cấp các ví dụ để minh hoạ những tính năng này:
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-08-12 UTC."],[[["\u003cp\u003eWebGL-powered features for Maps JavaScript API enable control over tilt and rotation, addition of 3D objects, and custom 2D/3D graphics with WebGL Overlay View.\u003c/p\u003e\n"],["\u003cp\u003eTo utilize WebGL features, use a vector map by specifying \u003ccode\u003erenderingType: RenderingType.VECTOR\u003c/code\u003e during map initialization or by using a map ID with the vector option enabled.\u003c/p\u003e\n"],["\u003cp\u003eTilt and rotation can be controlled programmatically or through user interaction by enabling \u003ccode\u003etiltInteractionEnabled\u003c/code\u003e and \u003ccode\u003eheadingInteractionEnabled\u003c/code\u003e map options.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003e<gmp-map>\u003c/code\u003e element automatically enables vector maps, tilt, and heading by default, simplifying integration.\u003c/p\u003e\n"],["\u003cp\u003eSeveral examples and demos are available to explore the capabilities and implementation of WebGL features in Maps JavaScript API.\u003c/p\u003e\n"]]],[],null,["\u003cbr /\u003e\n\nWebGL-powered features for Maps JavaScript API let you\ncontrol tilt and rotation, add 3D objects directly to the map, and more. The\nfollowing features are included:\n\n- [WebGL Overlay View](/maps/documentation/javascript/webgl/webgl-overlay-view) lets you add custom 2D and 3D graphics and animated content to your maps.\n- [Tilt and heading](/maps/documentation/javascript/vector-map#tilt-rotation) can now be adjusted programmatically, and by using mouse and keyboard gestures.\n- [map.moveCamera()](/maps/documentation/javascript/vector-map#control-camera) lets you simultaneously change multiple camera properties.\n- Zoom now supports [fractional values](/maps/documentation/javascript/vector-map#fractional-zoom).\n\nGet started\n\nIn order to use the new WebGL features, you must use a vector map. This section\nshows you how.\n\nSpecify the `renderingType` option\n\nUse the `renderingType` option to specify either the raster or vector\nrendering type for your map (no map ID required):\n\n1. Load the `RenderingType` library; this can be done when loading the Maps\n library:\n\n const { Map, RenderingType } = await google.maps.importLibrary(\"maps\") as google.maps.MapsLibrary;\n\n2. When initializing the map, use the `renderingType` option to specify either\n `RenderingType.VECTOR` or `RenderingType.RASTER`:\n\n map = new Map(\n document.getElementById('map') as HTMLElement,\n {\n zoom: 4,\n center: position,\n renderingType: RenderingType.VECTOR,\n }\n );\n\nThe `renderingType` option overrides any rendering type settings made by\nconfiguring a map ID.\n\n- To enable tilt and rotation, set the `tiltInteractionEnabled` map option to true or call `map.setTiltInteractionEnabled`.\n- To enable panning, set the `headingInteractionEnabled` map option to `true` or call `map.setHeadingInteractionEnabled`.\n\nUse a map ID to set rendering type\n\nYou can also specify the rendering type by using a map ID. To create a new map\nID, follow the steps in [Using Cloud-based Map Styling - Get a map ID](/maps/documentation/javascript/styling#creating-map-ids).\nBe sure to set the Map type to **JavaScript** , and select the **Vector**\noption. Check **Tilt** or **Rotation** to enable tilt and rotation on the\nmap. Doing so lets you programmatically adjust these values, and also\nlets users adjust tilt and heading directly on the map. If the use of tilt or\nheading will adversely affect your app, leave **Tilt** and **Rotation** un-\nchecked so users cannot adjust tilt and rotation.\n\nNext, update your map initialization code with the map ID you created. You can\nfind your map IDs on the\n[Maps\nManagement](https://console.cloud.google.com/google/maps-apis/studio/maps) page. Provide a map ID when you instantiate the map using the\n`mapId` property as shown here: \n\n```javascript\nmap = new google.maps.Map(document.getElementById('map'), {\n center: {lat: -34.397, lng: 150.644},\n zoom: 8,\n mapId: '\u003cvar translate=\"no\"\u003eMAP_ID\u003c/var\u003e'\n});\n```\n| **Important:** It is recommended to associate your map ID and API key with the same Google Cloud console project.\n\nUse the `\u003cgmp-map\u003e` element\n\nVector maps, tilt, and heading are enabled by default when using he `\u003cgmp-map\u003e`\nelement, which lets you add a map to your page using HTML. [Learn more](/maps/documentation/javascript/add-google-map-wc-tut).\n\nExamples\n\nExamples have been provided to demonstrate these features:\n\n- [WebGL Overlay View](/maps/documentation/javascript/examples/webgl/webgl-overlay-simple)\n- [WebGL Tilt and Rotation](/maps/documentation/javascript/examples/webgl/webgl-tilt-rotation)\n- [WebGL Feature Tour](https://goo.gle/maps-platform-webgl-tour)\n- [WebGL Travel App Demo](https://goo.gle/maps-platform-webgl-travel-demo)"]]
