Karte lokalisieren

Sie können die Sprach- und Regionseinstellungen für Ihre Karte 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.

Die Abdeckung für 3D-Karten in Maps JavaScript finden Sie in der Tabelle zur Kartenabdeckung.

Sprachlokalisierung

Standardmäßig verwendet die Maps JavaScript API die Spracheinstellungen, die der Nutzer in seinem Browser festgelegt hat, 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, Kurzinfos und Urheberrechtshinweise angezeigt werden. Sie wirkt sich auch auf die Übersetzung von politischen Merkmalen, Beschreibungen und natürlichen Merkmalen aus, z. B. „Geneva“ in „Genève“ oder „lake“ in „lac“, oder auf die Richtung, in der die Sprache dargestellt wird.

Die 3D-Karten in Maps JavaScript suchen in der folgenden Reihenfolge nach Lokalisierungseinstellungen. Wenn im ersten Schritt keine Einstellungen definiert sind, wird in der angegebenen Reihenfolge weitergesucht. Widersprüchliche Lokalisierungsanweisungen werden gemäß der unten definierten Rangfolge aufgelöst:

  1. Map3DElement-Definition Dies ist der erste Ort, an dem 3D Maps nach Lokalisierungseinstellungen sucht.
  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 und die Domain, von der die Maps JavaScript API geladen wurde, für die Region verwendet.

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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body></body>
</html>

Regionslokalisierung

Mit dem Parameter region können unterschiedliche Kartenkacheln geladen oder die Anwendung so gewichtet werden, dass regional relevantere Ergebnisse angezeigt werden. Außerdem wird durch das Festlegen des Regions-Tags sichergestellt, dass die Anwendung den lokalen Gesetzen entspricht, da die korrekte regionale Lokalisierung für das Land angewendet wird, in dem die Anwendung gehostet wird.