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.
Maps JavaScript API cung cấp 2 cách triển khai bản đồ: raster và vectơ. Bản đồ raster được tải theo mặc định và tải bản đồ dưới dạng một lưới gồm các ô hình ảnh raster dựa trên pixel, do phía máy chủ của Nền tảng Google Maps tạo, sau đó được phân phát cho ứng dụng web của bạn. Bản đồ vectơ được tạo thành từ các ô dựa trên vectơ, được vẽ tại thời điểm tải ở phía máy khách bằng WebGL, một công nghệ web cho phép trình duyệt truy cập vào GPU trên thiết bị của người dùng để kết xuất đồ hoạ 2D và 3D. Bạn nên dùng loại bản đồ vectơ để mang lại trải nghiệm tốt nhất cho người dùng, vì loại bản đồ này giúp cải thiện độ trung thực về hình ảnh cũng như khả năng kiểm soát độ nghiêng và hướng trên bản đồ.
Tìm hiểu thêm về các tính năng của bản đồ vectơ.
Đặt loại kết xuất cho bản đồ bằng cách chỉ định lựa chọn bản đồ renderingType hoặc bằng cách đặt lựa chọn trên mã bản đồ được liên kết. 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 đồ thực hiện.
Chỉ định lựa chọn renderingType
Sử dụng tuỳ chọn renderingType để chỉ định loại kết xuất raster hoặc vectơ cho bản đồ của bạn (không cần mã bản đồ). Đối với các bản đồ được tải bằng phần tử div và JavaScript, loại kết xuất mặc định là google.maps.RenderingType.RASTER. Hãy làm theo các bước sau để đặt lựa chọn renderingType:
Tải thư viện RenderingType; bạn có thể thực hiện việc này khi tải thư viện Maps:
Khi đặt loại kết xuất bản đồ vectơ, bạn phải đặt các lựa chọn cho những tính năng cần thiết.
Để bật chế độ nghiêng, hãy đặt lựa chọn bản đồ tiltInteractionEnabled thành true hoặc gọi map.setTiltInteractionEnabled(true).
Để 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(true).
Đối với các bản đồ được tải bằng phần tử <gmp-map>, kiểu kết xuất mặc định là google.maps.RenderingType.VECTOR, có bật chế độ kiểm soát độ nghiêng và hướng. Để đặt loại kết xuất bằng phần tử <gmp-map>, hãy sử dụng thuộc tính rendering-type.
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 một lựa chọn (Vector hoặc Raster). Đánh dấu vào Độ nghiêng và Xoay để bật tính năng 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ỏ chọn Độ 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 tạo 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:
[[["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-27 UTC."],[[["\u003cp\u003eThe Maps JavaScript API offers two map types: raster (default) and vector (recommended for enhanced user experience with tilt and heading control).\u003c/p\u003e\n"],["\u003cp\u003eYou can set the rendering type using the \u003ccode\u003erenderingType\u003c/code\u003e map option or by associating a map ID with specific rendering settings.\u003c/p\u003e\n"],["\u003cp\u003eVector maps provide better visual quality and allow for tilt and heading manipulation, requiring enabling specific interactions for these features.\u003c/p\u003e\n"],["\u003cp\u003eMap IDs offer pre-configured rendering types and can be created and managed through the Cloud console, enabling customization without code changes.\u003c/p\u003e\n"],["\u003cp\u003eUsing a map ID and API key from the same Google Cloud project is recommended for optimal integration and management.\u003c/p\u003e\n"]]],[],null,["# Rendering type (raster and vector)\n\nThe Maps JavaScript API offers two different implementations of the map: raster\nand vector. The raster map is loaded by default, and loads the map as a grid of\npixel-based raster image tiles, which are generated by Google Maps Platform\nserver-side, then served to your web app. The vector map is a composed of\nvector-based tiles, which are drawn at load time on the client-side using\nWebGL, a web technology that allows the browser to access the GPU on the user's\ndevice to render 2D and 3D graphics. The vector map type is recommended for the\nbest user experience, as it provides improved visual fidelity as well as the\nability to control tilt and heading on the map.\n[Learn more about vector map features.](/maps/documentation/javascript/vector-map)\n\nSet the rendering type for a map either by specifying the `renderingType` map\noption, or by setting the option on an associated map ID. The `renderingType`\noption overrides any rendering type settings made by configuring a map ID.\n\nSpecify the `renderingType` option\n----------------------------------\n\nUse the `renderingType` option to specify either the raster or vector\nrendering type for your map (no map ID required). For maps loaded using a `div`\nelement and JavaScript, the default rendering type is\n`google.maps.RenderingType.RASTER`. Take these steps to set the `renderingType`\noption:\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\");\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'),\n {\n zoom: 4,\n center: position,\n renderingType: RenderingType.VECTOR,\n }\n );\n\nWhen the vector map rendering type is set, you must set the options for the\nneeded features.\n\n- To enable tilt, set the `tiltInteractionEnabled` map option to `true` or call `map.setTiltInteractionEnabled(true)`.\n- To enable panning, set the `headingInteractionEnabled` map option to `true` or call `map.setHeadingInteractionEnabled(true)`.\n\nFor maps loaded using the `\u003cgmp-map\u003e` element, the default rendering type is\n`google.maps.RenderingType.VECTOR`, with tilt and heading control enabled. To\nset the rendering type by using the `\u003cgmp-map\u003e` element, use the\n`rendering-type` attribute.\n\nUse a map ID to set rendering type\n----------------------------------\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 an option (**Vector**\nor **Raster** ). Check **Tilt** and **Rotation** to enable tilt and rotation\non the map. Doing so will allow you to programmatically adjust these values, and\nalso lets users adjust tilt and heading directly on the map. If the use of tilt\nor heading will adversely affect your app, leave **Tilt** and **Rotation** un-\nchecked so users will not be able to 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."]]
