Przedstawiamy interfejs Places UI Kit: gotową do użycia, niedrogą bibliotekę komponentów, która umożliwia przeniesienie znanego interfejsu Miejsc w Mapach Google na dowolną mapę. Wypróbuj je i podziel się z nami swoją opinią, aby pomóc nam kształtować przyszłość GMP.

Ta strona została przetłumaczona przez Cloud Translation API.

Dostosowywanie mapy Google: legendy niestandardowe

Przegląd

Z tego samouczka dowiesz się, jak utworzyć legendę na mapie Google. Legenda zwykle opisuje symbole i znaczniki na mapie. Możesz je utworzyć za pomocą funkcji pozycjonowania elementów sterujących.

Mapa poniżej zawiera legendę z informacjami o 3 różnych markerach niestandardowych.

W sekcji poniżej znajdziesz cały kod potrzebny do utworzenia mapy i legendy w tym samouczku.

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

Wypróbuj przykład

JSFiddle.net Google Cloud Shell

W sekcjach poniżej znajdziesz główne kroki tworzenia legendy.

Tworzenie kontenera legendy

W tabeli poniżej znajdziesz wyjaśnienie kodu, który dostosowuje legendę.

Kod i opis
`<div id="legend"><h3>Legend</h3></div>`	Tworzy `div` do przechowywania treści. Dodaje nagłówek poziomu 3 do elementu `div`.
`map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push (document.getElementById('legend'));`	Umieszcza `div` w prawym dolnym rogu mapy, dodając pozycję sterowania. Dowiedz się więcej o innych opcjach pozycji kontrolnej.
`<style> #legend { font-family: Arial, sans-serif; background: #fff; padding: 10px; margin: 10px; border: 3px solid #000; } </style>`	Określa styl elementu sterującego legendą za pomocą CSS.

Dodawanie treści legendy

Użyj istniejącej definicji stylów znaczników, aby wypełnić legendę.

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); }