Thay đổi chế độ bản đồ

Các chế độ bản đồ 3D sau đây có trong Bản đồ 3D trong Maps JavaScript:

  • ROADMAP hiển thị chế độ xem lộ trình mặc định có nhãn bản đồ cơ sở.
  • SATELLITE hiển thị bản đồ chân thực dựa trên hình ảnh chụp từ trên không.
  • HYBRID hiển thị chế độ xem bản đồ vệ tinh có nhãn bản đồ cơ sở.

Sau đây là ví dụ về bản đồ 3D ở chế độ ROADMAP:

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>

Dùng thử mẫu

Trường hợp sử dụng

  • Lộ trình: Phù hợp nhất với các ứng dụng có nhiều thông tin chỉ đường, trong đó khả năng đọc và dữ liệu ở cấp đường phố là yếu tố chính.
  • Vệ tinh và kết hợp: Lý tưởng cho các ứng dụng bất động sản, giám sát môi trường hoặc du lịch, nơi độ trung thực về hình ảnh và ngữ cảnh địa hình là yếu tố cần thiết.