Localizzare la mappa

Puoi personalizzare le impostazioni di lingua e regione utilizzate nella mappa modificando le impostazioni di lingua predefinite e il codice della regione della mappa, che può influire sul comportamento della mappa in base al paese o al territorio specificato.

Consulta la copertura di 3D Maps in Maps JavaScript nella tabella di copertura di Maps.

Localizzazione della lingua

Per impostazione predefinita, l'API Maps JavaScript utilizza le impostazioni di lingua specificate dall'utente nel browser per determinare la traduzione della mappa da utilizzare. Tuttavia, puoi modificare questa impostazione e impostare una lingua specifica da utilizzare impostando il parametro language durante la creazione di una mappa 3D. La lingua e la regione possono essere aggiornate dopo l'inizializzazione della mappa.

L'impostazione del parametro language influisce sulla lingua in cui vengono visualizzati i controlli, i suggerimenti e le note sul copyright. Influisce anche sulla traduzione di elementi politici, descrittori ed elementi naturali, ad esempio modificando "Geneva" in "Genève" o "lake" in "lac", oppure modificando la direzione in cui viene eseguito il rendering della lingua.

3D Maps in Maps JavaScript cerca le preferenze di localizzazione nel seguente ordine. Se le preferenze non sono definite nel primo passaggio, continua a cercarle nell'ordine specificato. Eventuali istruzioni di localizzazione in conflitto vengono risolte in base alla precedenza definita di seguito:

  1. Definizione di Map3DElement. Questo è il primo posto in cui 3D Maps cerca le preferenze di localizzazione.
  2. Caricatore dell'API Maps JavaScript. Viene utilizzata la lingua specificata durante il caricamento dell'API Maps JavaScript.
  3. Impostazione del browser e dominio. L'impostazione del browser viene utilizzata per la lingua e il dominio da cui è stata caricata l'API Maps JavaScript viene utilizzato per la regione.

L'esempio seguente mostra una mappa in cinese e imposta la regione sulla Cina:

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>

Prova campione

Localizzazione della regione

Il parametro region può fornire riquadri mappa diversi o orientare l'applicazione verso risultati più appropriati a livello regionale. Inoltre, l'impostazione del tag della regione garantisce che l'applicazione sia conforme alle leggi locali assicurando che venga applicata la localizzazione regionale corretta al paese in cui è ospitata l'applicazione.