Tạo điểm đánh dấu bằng HTML

Bạn có thể sử dụng HTML và CSS tuỳ chỉnh để tạo điểm đánh dấu 3D có tác động hình ảnh cao, có thể có tính tương tác và ảnh động. Tất cả các thực thể Marker3DElement được thêm vào DOM dưới dạng phần tử HTML. Bạn có thể truy cập vào các thực thể này bằng cách sử dụng thuộc tính Marker3DElement và thao tác tương tự như với bất kỳ phần tử DOM nào khác.

Điểm đánh dấu cơ bản

Bản đồ mẫu này cho thấy cách tạo một điểm đánh dấu tuỳ chỉnh cơ bản theo cách khai báo.

<html>
<head>
    <title>3D Map - Declarative</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        gmp-map-3d {
            height: 100%;
        }
    </style>
</head>
<body>
    <gmp-map-3d center="37.4239163, -122.0947209, 0" tilt="67.5" range="1000" mode="hybrid">
        <gmp-marker-3d position="37.4239163, -122.0947209,50" altitude-mode="absolute" extruded="true" label="Basic Marker"></gmp-marker-3d>
    </gmp-map-3d>
    <script async
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&v=beta&libraries=maps3d"></script>
</body>
</html>

Điểm đánh dấu tương tác

Ví dụ này cho thấy cách tạo điểm đánh dấu tương tác bằng HTML.

<html>
  <head>
    <title>Pure HTML Interactive Marker Demo</title>
    <style>
      html,
      body {
        height:100%;
        margin: 0;
        padding: 0;
      }
      gmp-map-3d {
        height: 400px;
        width: 800px;
      }
    </style>
  </head>
  <body>
    <gmp-map-3d center="37.819852,-122.478549" tilt="75" range="2000" heading="330" mode="hybrid">
      <gmp-marker-3d-interactive position="37.819852,-122.478549,100"></gmp-marker-3d-interactive>
    </gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&v=alpha&libraries=maps3d">
    </script>
  </body>
</html>