Melokalkan peta

Anda dapat menyesuaikan setelan bahasa dan wilayah yang digunakan dalam peta dengan mengubah setelan bahasa default dan kode wilayah peta, yang dapat memengaruhi perilaku peta berdasarkan negara atau wilayah yang ditentukan.

Tinjau cakupan untuk Peta 3D di Maps JavaScript dalam tabel cakupan Maps.

Pelokalan bahasa

Secara default, Maps JavaScript API menggunakan setelan bahasa yang ditentukan pengguna di browsernya untuk menentukan terjemahan peta yang akan digunakan. Namun, Anda dapat mengubahnya, dan menetapkan bahasa tertentu yang akan digunakan dengan menetapkan parameter language saat membuat peta 3D. Bahasa dan wilayah dapat diperbarui setelah peta diinisialisasi.

Menetapkan parameter language memengaruhi bahasa yang digunakan untuk menampilkan kontrol, tooltip, dan pemberitahuan hak cipta. Hal ini juga memengaruhi terjemahan fitur politik, deskriptor, dan fitur alami; seperti mengubah "Geneva" menjadi "Genève" atau "lake" menjadi "lac", atau mengubah arah bahasa dirender.

Peta 3D di Maps JavaScript mencari preferensi pelokalan dalam urutan berikut. Jika preferensi tidak ditentukan pada langkah pertama, maka pencarian akan dilanjutkan dalam urutan yang ditentukan. Semua petunjuk pelokalan yang bertentangan akan diselesaikan berdasarkan prioritas yang ditentukan di bawah:

  1. Definisi Map3DElement. Ini adalah tempat pertama yang dicari oleh Peta 3D untuk menemukan preferensi pelokalan.
  2. Pemuat Maps JavaScript API. Bahasa yang ditentukan saat memuat Maps JavaScript API digunakan.
  3. Setelan browser dan domain. Setelan browser digunakan untuk bahasa, dan domain tempat Maps JavaScript API dimuat digunakan untuk wilayah.

Contoh berikut menampilkan peta dalam bahasa China dan menetapkan wilayah ke China:

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>

Mencoba Contoh

Pelokalan wilayah

Parameter region dapat menampilkan ubin peta yang berbeda atau mengarahkan aplikasi ke hasil yang lebih sesuai secara regional. Selain itu, menyetel tag wilayah memastikan bahwa aplikasi mematuhi hukum setempat dengan memastikan pelokalan regional yang benar diterapkan ke negara tempat aplikasi dihosting.