Karte lokalisieren

Sie können die Sprach- und Regionseinstellungen für Ihre Karte anpassen, indem Sie die Standardspracheinstellungen und den Regionscode der Karte ändern. Dies kann sich auf das Verhalten der Karte in Bezug auf das angegebene Land oder Gebiet auswirken.

Informationen zur Abdeckung von 3D Maps 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, wird die Sprache geändert, in der Steuerelemente, Tooltips und Urheberrechtshinweise angezeigt werden. Außerdem wirkt sich dies auf die Übersetzung von politischen, beschreibenden und natürlichen Merkmalen aus. So wird beispielsweise „Geneva“ in „Genève“ oder „lake“ in „lac“ geändert oder die Richtung, in der die Sprache gerendert wird.

Bei 3D Maps in Maps JavaScript werden die Lokalisierungseinstellungen in der folgenden Reihenfolge 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. Definition von Map3DElement Hier sucht 3D Maps zuerst nach Lokalisierungseinstellungen.
  2. Loader der Maps JavaScript API Die Sprache, die beim Laden der Maps JavaScript API angegeben wurde, wird verwendet.
  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 auf Chinesisch 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',
        gestureHandling: 'COOPERATIVE',
    });

    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',
        gestureHandling: 'COOPERATIVE',
    });

    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 relevantere Ergebnisse ausgerichtet werden. Wenn Sie das Regionstag festlegen, wird außerdem sichergestellt, dass die Anwendung den lokalen Gesetzen entspricht, indem die korrekte Regionslokalisierung für das Land angewendet wird, in dem die Anwendung gehostet wird.