Nhảy tới nội dung

Marker

Thêm điểm đánh dấu mặc định vào bản đồ.

Mô tả​

@openmapvn/openmapvn-gl cho phép chúng ta dánh dấu một điểm trên bản đồ.

Cách sử dụng​

Để đánh dấu diểm trên bản đồ bạn cần phải thêm code snippet dưới đây trong tệp HTML của bạn. Code snippet này sẽ tạo một điểm được đánh dấu bằng một biểu tượng marker trên bản đồ của bạn

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Openmap.vn Demo Map</title>
    <meta
      property="og:description"
      content="Initialize a map in an HTML element with OpenmapVN GL."
    />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/@openmapvn/openmapvn-gl@latest/dist/maplibre-gl.css"
    />
    <script src="https://unpkg.com/@openmapvn/openmapvn-gl@latest/dist/maplibre-gl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const map = new maplibregl.Map({
        container: "map",
        style:
          "https://maptiles.openmap.vn/styles/day-v1/style.json?apikey=YOUR_API_KEY",
        center: [105.85237, 21.03024],
        zoom: 15,
        maplibreLogo: true
      });

      const marker = new maplibregl.Marker()
        .setLngLat([105.85237, 21.03024])
        .addTo(map);
    </script>
  </body>
</html>
thông tin

Để biết thêm thông tin của thư viện @openmapvn/openmapvn-gl bạn có thể tham khảo tại Openmap.vn GL JS documentation.