Karte lokalisieren

Sie können die in Ihrer Karte verwendeten Sprach- und Regionseinstellungen anpassen, indem Sie die Standardspracheinstellungen und den Regionscode der Karte ändern. Dadurch kann sich das Verhalten der Karte je nach angegebenem Land oder Gebiet ändern.

Hier finden Sie eine Tabelle mit der Abdeckung von 3D-Karten in Maps JavaScript.

Sprachlokalisierung

Standardmäßig verwendet die Maps JavaScript API die Spracheinstellungen, die der Nutzer in seinem Browser angibt, um zu bestimmen, welche Übersetzung der Karte verwendet werden soll. Sie können dies jedoch ändern und eine bestimmte Sprache festlegen, indem Sie beim Erstellen einer 3D-Karte den Parameter language festlegen. Sprache und Region können nach der Initialisierung der Karte aktualisiert werden.

Wenn Sie den Parameter language festlegen, wirkt sich das auf die Sprache aus, in der Steuerelemente, Tooltips und Urheberrechtshinweise angezeigt werden. Dies wirkt sich auch auf die Übersetzung von politischen, beschreibenden und natürlichen Merkmalen aus, z. B. wird „Geneva“ in „Genève“ oder „lake“ in „lac“ geändert oder die Richtung, in der die Sprache gerendert wird, wird geändert.

Bei 3D-Karten in Maps JavaScript wird in der folgenden Reihenfolge nach Lokalisierungseinstellungen gesucht. Wenn im ersten Schritt keine Einstellungen definiert sind, wird in der angegebenen Reihenfolge weitergesucht. Widersprüchliche Lokalisierungsanweisungen werden anhand der unten definierten Priorität aufgelöst:

  1. Map3DElement-Definition Hier sucht 3D Maps zuerst nach Lokalisierungseinstellungen.
  2. Maps JavaScript API Loader Es wird die Sprache verwendet, die beim Laden der Maps JavaScript API angegeben wurde.
  3. Browsereinstellung und Domain: Die Browsereinstellung wird für die Sprache verwendet und die Domain, von der die Maps JavaScript API geladen wurde, für die Region.

Im folgenden Beispiel wird eine Karte in chinesischer Sprache angezeigt und China als Region festgelegt:

TypeScript

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 49.75371685807847,
            lng: -123.13227141171181,
            altitude: 30,
        },
        tilt: 50.64793990040634,
        heading: 44.480020261589154,
        range: 51618.36056532338,
        language: 'ZH',
        region: 'CN',
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();

JavaScript

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 49.75371685807847,
            lng: -123.13227141171181,
            altitude: 30,
        },
        tilt: 50.64793990040634,
        heading: 44.480020261589154,
        range: 51618.36056532338,
        language: 'ZH',
        region: 'CN',
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#gmp-map-3d {
    height: 100%;
}
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

HTML

<html>
    <head>
        <title>3d localization</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
            });
        </script>
    </head>
    <body></body>
</html>

Testbeispiel

Regionslokalisierung

Mit dem Parameter region können verschiedene Kartenkacheln bereitgestellt oder die Anwendung auf regional angemessenere Ergebnisse ausgerichtet werden. Durch Festlegen des Region-Tags wird außerdem dafür gesorgt, dass die Anwendung lokalen Gesetzen entspricht, da die korrekte regionale Lokalisierung für das Land angewendet wird, in dem die Anwendung gehostet wird.