Places UI Kit: Một thư viện có thể sử dụng ngay, cung cấp không gian tuỳ chỉnh và kiểm soát cho nhà phát triển. Hãy dùng thử và chia sẻ ý kiến của bạn về trải nghiệm dùng Bộ giao diện người dùng.

Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Hạn chế chế độ xem camera và ranh giới

Chọn nền tảng: Android iOS JavaScript

Bạn có thể muốn kiểm soát chế độ xoay, độ cao tối đa của camera hoặc tạo ranh giới vĩ độ và kinh độ để hạn chế chuyển động của người dùng trong một bản đồ nhất định. Bạn có thể thực hiện việc này bằng cách sử dụng các quy định hạn chế về camera.

Ví dụ sau đây cho thấy một bản đồ có ranh giới vị trí được đặt để giới hạn chuyển động của camera:

Hạn chế ranh giới trên bản đồ

Bạn có thể hạn chế ranh giới địa lý của camera bằng cách đặt tuỳ chọn bounds.

Mã mẫu sau đây minh hoạ cách hạn chế ranh giới trên bản đồ:

TypeScript

async function init(): Promise<void> {
    await google.maps.importLibrary('maps3d');

    const map3DElement = document.querySelector('gmp-map-3d')!;

    // Restrict the position of the camera to the specified bounds.
    map3DElement.bounds = {
        south: -48.3,
        west: 163.56,
        north: -32.86,
        east: -180,
    };
}

void init();index.ts

JavaScript

async function init() {
    await google.maps.importLibrary('maps3d');

    const map3DElement = document.querySelector('gmp-map-3d');

    // Restrict the position of the camera to the specified bounds.
    map3DElement.bounds = {
        south: -48.3,
        west: 163.56,
        north: -32.86,
        east: -180,
    };
}

void init();index.js

CSS

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}style.css

HTML

<html>
    <head>
        <title>Map</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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map-3d
            id="gmp-map-3d"
            center="-47.1375,169.5235,150000"
            tilt="67.5"
            mode="hybrid"
            gesture-handling="cooperative">
        </gmp-map-3d>
    </body>
</html>index.html

Hạn chế camera

Bạn có thể hạn chế chuyển động của camera bằng cách đặt bất kỳ tuỳ chọn nào sau đây:

maxAltitude
minAltitude
maxHeading
minHeading
maxTilt
minTilt

Mã mẫu sau đây minh hoạ cách hạn chế máy ảnh:

// Restrict the movement of the camera.
map3DElement.maxAltitude = 1000;
map3DElement.minAltitude = 500;
map3DElement.maxTilt = 55;
map3DElement.minTilt = 35;

Hạn chế ranh giới bản đồ và camera

Bạn có thể đồng thời giới hạn cả ranh giới bản đồ và ranh giới camera. Đoạn mã mẫu sau đây minh hoạ cách hạn chế cả ranh giới bản đồ và ranh giới camera:

// Restrict the movement of the camera.
map3DElement.maxAltitude = 1000;
map3DElement.minAltitude = 500;
map3DElement.maxTilt = 55;
map3DElement.minTilt = 35;

// Restrict the position of the camera to the specified bounds.
map3DElement.bounds = {
    north: 20.93,
    west: -156.38,
    south: 20.90,
    east: -156.31,
};

Kiểm soát việc xử lý cử chỉ

Khi người dùng cuộn một trang có chứa bản đồ, thao tác cuộn có thể vô tình khiến bản đồ thu phóng. Bạn có thể kiểm soát hành vi này bằng cách đặt tuỳ chọn bản đồ gestureHandling.

gestureHandling: `cooperative`

Xử lý cử chỉ "Hợp tác" cho phép người dùng cuộn trang mà không ảnh hưởng đến việc thu phóng hoặc kéo bản đồ. Để thu phóng, người dùng có thể sử dụng các nút điều khiển, cử chỉ bằng hai ngón tay (đối với thiết bị có màn hình cảm ứng) hoặc bằng cách giữ phím CMD/CTRL trong khi cuộn.

Đoạn mã sau đây minh hoạ cách đặt chế độ xử lý cử chỉ thành "cooperative":

<gmp-map-3d
    id="gmp-map-3d"
    center="20.92,-156.36,500"
    tilt="67.5"
    mode="hybrid"
    gesture-handling="cooperative">
</gmp-map-3d>

gestureHandling: `greedy`

Xử lý cử chỉ "Greedy" (Tham lam) phản ứng với tất cả sự kiện cuộn và cử chỉ chạm.

gestureHandling: `auto`

Thao tác xử lý cử chỉ "Tự động" thay đổi hành vi của bản đồ tuỳ thuộc vào việc bản đồ có nằm trong <iframe> hay không và trang có thể cuộn được hay không.

Nếu bản đồ nằm trong <iframe>, thì việc xử lý cử chỉ sẽ là "hợp tác".
Nếu bản đồ không nằm trong <iframe>, thì thao tác xử lý cử chỉ sẽ là "greedy" (tham lam).