Übersicht
In diesem Tutorial erfahren Sie, wie Sie eine Legende auf einer Google Maps-Karte erstellen. In der Regel werden in Legenden die Symbole und Markierungen auf einer Karte erläutert. Sie können mithilfe der Positionierungsfunktion von benutzerdefinierten Steuerelementen erstellt werden.
Die Karte unten enthält eine Legende mit Informationen zu drei verschiedenen benutzerdefinierten Markierungen.
Der folgende Abschnitt enthält den gesamten Code, den Sie zum Erstellen der Karte und Legende in diesem Tutorial benötigen.
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;
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;
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;
}
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>
Testbeispiel
In den folgenden Abschnitten werden die wichtigsten Schritte zum Erstellen einer Legende erläutert.
Legendencontainer erstellen
In der folgenden Tabelle wird der Code erläutert, mit dem die Legende angepasst wird.
| Code und Beschreibung | |
|---|---|
|
Erstellt ein div-Element für den Inhalt.Fügt dem div-Element eine Überschrift der Ebene 3 hinzu. |
|
Positioniert das div-Element rechts unten auf der Karte. Dazu wird eine Position für Steuerelemente hinzugefügt. Weitere Informationen zur Positionierung von Steuerelementen |
|
Gestaltet das Legendensteuerelement mit CSS. |
Legendeninhalt hinzufügen
Verwenden Sie die vorhandene Definition für Markierungsstile, um die Legende auszufüllen.
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);
}