JAVASCRIPT API | Goong Documents

Sử dụng Goong Maps với Goong Js

Phiên bản hiện tại: v1.0.9

Tuỳ chỉnh kiểu bản đồ
Tải map nhanh
Tương thích với các công cụ khác của Goong

Goong JS là một thư viện JavaScript có thể tuỳ chỉnh và tương tác với các map vector trên web. Nó là một phần của hệ sinh thái Goong GL. Để bắt đầu với Goong JS hoặc bất kỳ nền tảng nào khác của chúng tôi, hãy tự tạo cho bạn một API key.

Bắt đầu ngay

CDN

Module bundler

Nhúng đường dẫn dưới đây vào thẻ <head> của tệp HTML.

<script src='https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js'></script>
<link href='https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.css' rel='stylesheet' />

Đặt đoạn code dưới đây vào thẻ <body> của tệp HTML.

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
    goongjs.accessToken = 'your maptiles key here';
    var map = new goongjs.Map({
    container: 'map',
    style: 'https://tiles.goong.io/assets/goong_map_web.json', // stylesheet location
    center: [105.83991, 21.02800], // starting position [lng, lat]
    zoom: 9 // starting zoom
});
</script>
</body>
</html>

Cài đặt gói.

npm install --save @goongmaps/goong-js

Nhúng đường dẫn dưới đây vào thẻ <head> của tệp HTML.

<link href='https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.css' rel='stylesheet' />

Đặt đoạn code dưới đây vào thẻ <body> của tệp HTML.

import goongjs from 'goong-js'; // or "const goongjs = require('goong-js');"
goongjs.accessToken = 'your maptiles key here';
const map = new goongjs.Map({
    container: 'map',
    style: 'https://tiles.goong.io/assets/goong_map_web.json', // stylesheet location
    center: [105.83991, 21.02800], // starting position [lng, lat]
    zoom: 9 // starting zoom
});

Tham khảo tài liệu dưới đây

Tài liệu này được chia thành nhiều phần:

Map. Đối tượng Bản đồ là bản đồ trên trang của bạn. Nó cho phép bạn truy cập các phương thức và thuộc tính để tương tác với kiểu và các lớp của bản đồ, phản hồi các sự kiện và điều khiển phối cảnh của người dùng bằng máy ảnh.
Properties and options. Phần này mô tả các thuộc tính và tùy chọn chung của Goong GL JS mà bạn có thể muốn truy cập trong khi khởi tạo bản đồ của mình hoặc truy cập thông tin về trạng thái của bản đồ.
Markers and controls.Phần này mô tả các yếu tố giao diện người dùng mà bạn có thể thêm vào bản đồ của mình. Các mục trong phần này tồn tại bên ngoài thành phần canvas của bản đồ.
Geography and geometry. Phần này bao gồm các tiện ích chung và các loại liên quan đến làm việc và thao tác với thông tin địa lý hoặc hình học.
User interaction handlers. Các mục trong phần này liên quan đến cách thức bản đồ phản hồi đầu vào của người dùng.
Sources. Phần này mô tả các loại nguồn mà Goong GL JS có thể xử lý bên cạnh những loại được mô tả trong đặc điểm từng loại của Goong.
Events. Phần này mô tả các loại sự kiện khác nhau mà Goong GL JS có thể phát sinh.

Mỗi phần mô tả các lớp hoặc đối tượng cũng như các properties, parameters, instance members và các events liên quan của chúng. Nhiều phần cũng bao gồm các ví dụ mã nội tuyến và các tài nguyên liên quan.

Goong CSS

CSS được tham chiếu trong phần Bắt đầu được sử dụng để định kiểu các phần tử DOM được tạo bởi mã Mapbox. Không có CSS, các phần tử như Cửa sổ bật lên và Điểm đánh dấu sẽ không hoạt động.

Nhúng đường dẫn <link> vào thẻ <head> của tài liệu thông qua jsdelivr.net CDN là cách đơn giản và dễ dàng nhất để cung cấp CSS, nhưng nó cũng được đóng gói trong mô-đun Goong, nghĩa là nếu bạn có một bộ đóng gói có thể xử lý CSS, bạn có thể nhập CSS từ goong-js/dist/goong-js.css.

Lưu ý rằng nếu CSS không có sẵn trong lần kết xuất đầu tiên thì ngay sau khi CSS được cung cấp, các phần tử DOM phụ thuộc vào CSS này sẽ khôi phục.

Thành phần hỗ trợ

Thành phần hỗ trợ cho Goong GL JS (.js & .css) được phân phối qua jsdelivr.net.

Ví dụ

Trường hợp sử dụng	`.js`	`.css`
`latest`	https://cdn.jsdelivr.net/npm/@goongmaps/goong-js/dist/goong-js.js	https://cdn.jsdelivr.net/npm/@goongmaps/goong-js/dist/goong-js.css