Giới thiệu về Places UI Kit: Một thư viện thành phần có chi phí thấp và sẵn sàng sử dụng, cho phép bạn đưa giao diện người dùng quen thuộc của Google Maps cho Địa điểm vào bất kỳ bản đồ nào mà bạn chọn. Hãy dùng thử và chia sẻ ý kiến của bạn để góp phần định hình tương lai của GMP!

Trang này được dịch bởi Cloud Translation API.

Tuỳ chỉnh bản đồ trên Google Maps: Chú giải tuỳ chỉnh

Tổng quan

Tìm hiểu cách tạo chú thích trên bản đồ Google thông qua hướng dẫn này. Chú giải thường mô tả các biểu tượng và điểm đánh dấu trên bản đồ. Bạn có thể tạo các thành phần này bằng tính năng định vị của các chế độ kiểm soát tuỳ chỉnh.

Bản đồ bên dưới có một chú thích cung cấp thông tin về 3 điểm đánh dấu tuỳ chỉnh trên bản đồ.

Phần bên dưới hiển thị toàn bộ mã bạn cần để tạo bản đồ và chú thích trong hướng dẫn này.

TypeScript

let map: google.maps.Map;  function initMap(): void {   map = new google.maps.Map(document.getElementById("map") as HTMLElement, {     zoom: 16,     center: new google.maps.LatLng(-33.91722, 151.23064),     mapTypeId: "roadmap",   });    const iconBase = "https://maps.google.com/mapfiles/kml/shapes/";   const icons: Record<string, any> = {     parking: {       name: "Parking",       icon: iconBase + "parking_lot_maps.png",     },     library: {       name: "Library",       icon: iconBase + "library_maps.png",     },     info: {       name: "Info",       icon: iconBase + "info-i_maps.png",     },   };    const features = [     {       position: new google.maps.LatLng(-33.91721, 151.2263),       type: "info",     },     {       position: new google.maps.LatLng(-33.91539, 151.2282),       type: "info",     },     {       position: new google.maps.LatLng(-33.91747, 151.22912),       type: "info",     },     {       position: new google.maps.LatLng(-33.9191, 151.22907),       type: "info",     },     {       position: new google.maps.LatLng(-33.91725, 151.23011),       type: "info",     },     {       position: new google.maps.LatLng(-33.91872, 151.23089),       type: "info",     },     {       position: new google.maps.LatLng(-33.91784, 151.23094),       type: "info",     },     {       position: new google.maps.LatLng(-33.91682, 151.23149),       type: "info",     },     {       position: new google.maps.LatLng(-33.9179, 151.23463),       type: "info",     },     {       position: new google.maps.LatLng(-33.91666, 151.23468),       type: "info",     },     {       position: new google.maps.LatLng(-33.916988, 151.23364),       type: "info",     },     {       position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),       type: "parking",     },     {       position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),       type: "parking",     },     {       position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),       type: "library",     },   ];    features.forEach((feature) => {     new google.maps.Marker({       position: feature.position,       icon: icons[feature.type].icon,       map: map,     });   });    const legend = document.getElementById("legend") as HTMLElement;    for (const key in icons) {     const type = icons[key];     const name = type.name;     const icon = type.icon;     const div = document.createElement("div");      div.innerHTML = '<img src="' + icon + '"> ' + name;     legend.appendChild(div);   }    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend); }  declare global {   interface Window {     initMap: () => void;   } } window.initMap = initMap;index.ts

JavaScript

let map;  function initMap() {   map = new google.maps.Map(document.getElementById("map"), {     zoom: 16,     center: new google.maps.LatLng(-33.91722, 151.23064),     mapTypeId: "roadmap",   });    const iconBase = "https://maps.google.com/mapfiles/kml/shapes/";   const icons = {     parking: {       name: "Parking",       icon: iconBase + "parking_lot_maps.png",     },     library: {       name: "Library",       icon: iconBase + "library_maps.png",     },     info: {       name: "Info",       icon: iconBase + "info-i_maps.png",     },   };   const features = [     {       position: new google.maps.LatLng(-33.91721, 151.2263),       type: "info",     },     {       position: new google.maps.LatLng(-33.91539, 151.2282),       type: "info",     },     {       position: new google.maps.LatLng(-33.91747, 151.22912),       type: "info",     },     {       position: new google.maps.LatLng(-33.9191, 151.22907),       type: "info",     },     {       position: new google.maps.LatLng(-33.91725, 151.23011),       type: "info",     },     {       position: new google.maps.LatLng(-33.91872, 151.23089),       type: "info",     },     {       position: new google.maps.LatLng(-33.91784, 151.23094),       type: "info",     },     {       position: new google.maps.LatLng(-33.91682, 151.23149),       type: "info",     },     {       position: new google.maps.LatLng(-33.9179, 151.23463),       type: "info",     },     {       position: new google.maps.LatLng(-33.91666, 151.23468),       type: "info",     },     {       position: new google.maps.LatLng(-33.916988, 151.23364),       type: "info",     },     {       position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),       type: "parking",     },     {       position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),       type: "parking",     },     {       position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),       type: "library",     },   ];    features.forEach((feature) => {     new google.maps.Marker({       position: feature.position,       icon: icons[feature.type].icon,       map: map,     });   });    const legend = document.getElementById("legend");    for (const key in icons) {     const type = icons[key];     const name = type.name;     const icon = type.icon;     const div = document.createElement("div");      div.innerHTML = '<img src="' + icon + '"> ' + name;     legend.appendChild(div);   }    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend); }  window.initMap = initMap;index.js

CSS

/*   * Always set the map height explicitly to define the size of the div element  * that contains the map.   */ #map {   height: 100%; }  /*   * Optional: Makes the sample page fill the window.   */ html, body {   height: 100%;   margin: 0;   padding: 0; }  #legend {   font-family: Arial, sans-serif;   background: #fff;   padding: 10px;   margin: 10px;   border: 3px solid #000; }  #legend h3 {   margin-top: 0; }  #legend img {   vertical-align: middle; } style.css

HTML

<html>   <head>     <title>Custom Legend</title>      <link rel="stylesheet" type="text/css" href="./style.css" />     <script type="module" src="./index.js"></script>   </head>   <body>     <div id="map"></div>     <div id="legend"><h3>Legend</h3></div>      <!--        The `defer` attribute causes the script to execute after the full HTML       document has been parsed. For non-blocking uses, avoiding race conditions,       and consistent behavior across browsers, consider loading using Promises. See       https://developers.google.com/maps/documentation/javascript/load-maps-js-api       for more information.       -->     <script       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"       defer     ></script>   </body> </html>index.html

Dùng thử mẫu

JSFiddle.net Google Cloud Shell

Các phần dưới đây giải thích các bước chính để tạo chú thích.

Tạo vùng chứa chú thích

Bảng dưới đây giải thích mã tuỳ chỉnh chú thích.

Mã và nội dung mô tả
`<div id="legend"><h3>Legend</h3></div>`	Tạo một `div` để lưu giữ nội dung. Thêm tiêu đề cấp 3 (3) vào `div`.
`map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push (document.getElementById('legend'));`	Đặt `div` ở dưới cùng bên phải của bản đồ bằng cách thêm một vị trí điều khiển. Đọc về các lựa chọn khác về vị trí của nút điều khiển.
`<style> #legend { font-family: Arial, sans-serif; background: #fff; padding: 10px; margin: 10px; border: 3px solid #000; } </style>`	Tạo kiểu cho chế độ điều khiển chú thích bằng CSS.

Thêm nội dung chú giải

Sử dụng định nghĩa kiểu điểm đánh dấu hiện có để điền chú thích.

var legend = document.getElementById('legend'); for (var style in styles) {   var name = style.name;   var icon = style.icon;   var div = document.createElement('div');   div.innerHTML = '<img src="' + icon + '"> ' + name;   legend.appendChild(div); }