3D 地图模式

Maps JavaScript API 中提供了以下 3D 地图模式：

  • ROADMAP：显示默认的道路地图视图，并带有底图标签。
  • SATELLITE：根据航拍图像显示逼真的地图。
  • HYBRID：显示卫星地图视图，并带有底图标签。

下面是 ROADMAP 模式下的 3D 地图示例：

TypeScript

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 37.79334535092104,
            lng: -122.400742086205,
            altitude: 0,
        },
        range: 2400,
        tilt: 65,
        heading: 0,
        mode: 'ROADMAP',
        internalUsageAttributionIds: ['gmp_git_jsapisamples_v1_3d-rendering'],
    });

    document.body.append(map);

    // Create the controls container
    const controls = document.createElement('div');
    controls.id = 'controls';
    controls.classList.add('map-mode-control');

    // Create the select element
    const selector = document.createElement('select');
    selector.id = 'map-mode';

    const modes = ['ROADMAP', 'SATELLITE', 'HYBRID'];
    modes.forEach((modeName) => {
        const option = document.createElement('option');
        option.value = modeName;
        option.textContent = modeName;
        if (modeName === 'ROADMAP') {
            option.selected = true;
        }
        selector.appendChild(option);
    });

    selector.addEventListener('change', function () {
        map.mode = this.value as google.maps.maps3d.MapMode;
    });

    controls.appendChild(selector);
    document.body.appendChild(controls);
}

void init();

JavaScript

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 37.79334535092104,
            lng: -122.400742086205,
            altitude: 0,
        },
        range: 2400,
        tilt: 65,
        heading: 0,
        mode: 'ROADMAP',
        internalUsageAttributionIds: ['gmp_git_jsapisamples_v1_3d-rendering'],
    });

    document.body.append(map);

    // Create the controls container
    const controls = document.createElement('div');
    controls.id = 'controls';
    controls.classList.add('map-mode-control');

    // Create the select element
    const selector = document.createElement('select');
    selector.id = 'map-mode';

    const modes = ['ROADMAP', 'SATELLITE', 'HYBRID'];
    modes.forEach((modeName) => {
        const option = document.createElement('option');
        option.value = modeName;
        option.textContent = modeName;
        if (modeName === 'ROADMAP') {
            option.selected = true;
        }
        selector.appendChild(option);
    });

    selector.addEventListener('change', function () {
        map.mode = this.value;
    });

    controls.appendChild(selector);
    document.body.appendChild(controls);
}

void init();

CSS

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

gmp-map-3d {
    height: 100%;
    width: 100%;
}

.map-mode-control {
    position: fixed;
    bottom: 24px;
    right: 75px;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    z-index: 1;
}

.map-mode-control select {
    font-size: 13px;
    padding: 4px 8px;
    border: 1px solid #dadce0;
    border-radius: 6px;
    background-color: white;
    color: #3c4043;
    cursor: pointer;
    outline: none;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.map-mode-control select:hover {
    border-color: #1a73e8;
}

.map-mode-control select:focus {
    border-color: #1a73e8;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

HTML

<html>
    <head>
        <title>3d-map-roadmap</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",
                v: "alpha" 
            });
        </script>
    </head>

    <body></body>
</html>

试用选段

主要优势

  • 地球：您现在可以利用抽象地图图像和逼真地图图像，为各种用例提供完整的地图体验。
  • 自定义：您现在可以使用自定义按钮或函数在模式之间切换，而无需重新加载整个组件。