将地图本地化

您可以更改默认语言设置和地图的区域代码，从而自定义地图中使用的语言和区域设置，此操作会根据指定的国家或地区影响地图的行为。

查看 地图覆盖范围表，了解 Maps JavaScript 中 3D 地图的覆盖范围。

语言本地化

默认情况下，Maps JavaScript API 会使用用户在浏览器中指定的语言设置来确定要使用哪个地图翻译版本。不过，您可以在创建 3D 地图时设置 language 参数，从而更改此设置并指定要使用的特定语言。地图初始化后，可以更新语言和区域。

设置 language 参数会影响控件、提示和版权声明的显示语言。它还会影响政治特征、描述符和自然特征的翻译；例如，将“Geneva”更改为“Genève”或将“lake”更改为“lac”，或者更改语言的呈现方向。

Maps JavaScript 中的 3D 地图会按以下顺序查找本地化偏好设置。如果第一步未定义偏好设置，则继续按指定顺序查找。任何冲突的本地化指令都将根据以下定义的优先级来解决：

  1. Map3DElement 定义。这是 3D 地图查找本地化偏好的第一个位置。
  2. Maps JavaScript API 加载器。使用加载 Maps JavaScript API 时指定的语言。
  3. 浏览器设置和网域。浏览器设置用于确定语言，而加载 Maps JavaScript API 的网域用于确定区域。

下例以中文显示地图，并将区域设置为中国：

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>

试用示例

区域本地化

region 参数可提供不同的地图图块，或使应用偏向于更符合区域的结果。此外，设置区域标记可确保针对应用所部署到的国家/地区进行正确的区域本地化，从而确保应用符合当地法律。