Framework Example | Goong Documents

Dựa trên nhu cầu thực tế, chúng tôi cung cấp mẫu ví dụ giúp bạn tích hợp sản phẩm của chúng tôi vào dự án của bạn dễ dàng hơn.

Xem trên Github

React

The library for web and native user interfaces

Các bước thiết lập chung

Tải source code
Yêu cầu phiên bản Node.js >=15.0.0
Cài đặt package theo câu lệnh dưới đây npm install --save @goongmaps/goong-js
Nhúng link và script dưới đây vào thẻ <head> của tệp HTML <script src='https://cdn.jsdelivr.net/npm/@goongmaps/goong-js/dist/goong-js.js'></script>
<link href='https://cdn.jsdelivr.net/npm/@goongmaps/goong-js/dist/goong-js.css' rel='stylesheet' />

Bản đồ

Khởi tạo bản đồ

 goongjs.accessToken = { YOUR_API_KEY };
  var map = new goongjs.Map({
    container: 'map',
    style: 'https://tiles.goong.io/assets/goong_map_web.json',
    center: [105.83991, 21.02800],
    zoom: 9
    });

goongjs.accessToken = { YOUR_API_KEY }: Nhập key mà bạn đã đăng ký vào đây
new goongjs.Map(): Khởi tạo bản đồ
center: Vị trí ban đầu khi bản đồ được tải lên
zoom: Độ phóng to của bản đồ

Autocomplete

Khởi tạo bản đồ
Cài đặt thêm package theo câu lệnh dưới đây npm add @goongmaps/goong-geocoder
Nhúng link và script dưới đây vào thẻ <body> của tệp HTML <script src="https://cdn.jsdelivr.net/npm/@goongmaps/goong-geocoder@1.1.1/dist/goong-geocoder.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-geocoder@1.1.1/dist/goong-geocoder.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
Khởi tạo search box

 map.addControl(
   new GoongGeocoder({
   accessToken: { YOUR_MAPTILES_KEY },
   goongjs: goongjs
      })
    );

accessToken: { YOUR_MAPTILES_KEY }: Nhập key mà bạn đã đăng ký vào đây
new GoongGeocoder() : Khởi tạo search box

Đánh dấu

Khởi tạo bản đồ
Khởi tạo Marker trên bản đồ

Khai báo locations

const [locations, setLocations] = useState([
    {
      key: '1',
      coord: [107.58472, 16.46278],
    },
    {
      key: '2',
      coord: [108.03889, 12.66667],
    },
    ...
  ])

locations: Một mảng bao gồm các đối tượng mà trong các đối tượng đó có chứa kinh độ và vĩ độ được dùng để đặt Marker trên bản đồ.

Khởi tạo Marker

locations.map((location) => {
  return new goongjs.Marker()
  .setLngLat(location.coord)
  .addTo(mapRef.current);
  });

new goongjs.Marker(): Khởi tạo Marker.
setLngLat(): Truyền kinh độ vĩ độ cho Marker.
addTo(): Gán Marker lên bản đồ.

Thêm Marker

const handleAddMarker = () => {
     if (!lat || !lng) {
      alert("Please enter locations")
    } else if (selectLocation === null) {
      setLng("")
      setLat("")
      setLocations(a => [...a, { key: (locations.length + 1).toString(), coord: [parseFloat(lng), parseFloat(lat)] }]);
    } else {
      setLng("")
      setLat("")
      setLocations((e) => {
        const newLocations = [...e];
        newLocations.splice(selectLocation, 1, { key: (selectLocation + 1).toString(), coord: [parseFloat(lng), parseFloat(lat)] });
        return newLocations;
      });
    }
    setSelectLocation(null)
  };

Nếu người dùng không nhập kinh độ và vĩ độ thì sẽ có thông báo "Please enter locations", khi người dùng nhập kinh độ, vĩ độ vào ô Input, sẽ có hai trường hợp xảy ra:
Trường hợp 1: Người dùng thêm mới (selectLocation === null)
Trường hợp 2: Người dùng sửa (selectLocation !== null)

Sửa Marker

const handleEdit = (key) => {
   let index = locations.indexOf(key)
   setLng(key.coord[0])
   setLat(key.coord[1])
   setSelectLocation(index)
  }

Tham số truyền vào là key giúp cho người dùng lấy được vị trí của Marker cần sửa, sau đó dùng phương thức splice() để sửa (Trường hợp 2 đã nêu bên trên)

Xoá Marker

const handleDelete = (index) => {
    setLocations((e) => {
      const newLocations = [...e];
      newLocations.splice(index, 1);
      return newLocations;
    });
  }

Tham số truyền vào là index giúp cho người dùng lấy được vị trí của Marker cần xoá, sau đó dùng phương thức splice() để xoá.

Dẫn đường

Khởi tạo bản đồ
Cài đặt thêm package theo câu lệnh dưới đây npm install @mapbox/polyline
npm install @goongmap/goong-sdk
npm install axios
Các tham số cần thiết

Khai báo biến

const [origin, setOrigin] = useState({});
const [destination, setDestination] = useState({});
const [startPoint, setStartPoint] = useState("")
const [endPoint, setEndPoint] = useState("")

"origin" và "destination" là Object chứa toạ độ của điểm đầu và điểm cuối
"startPoint" và "endPoint" là địa điểm mà người dùng nhập vào

Kinh độ, vĩ độ của điểm bắt đầu

await axios.get(`${url}=${startPoint}&api_key=${process.env.REACT_APP_GOONG_MAP_KEY}`)
    .then(res => {
      const points = res.data;
      setOrigin(points.results[0].geometry.location);
    })
    .catch(error => console.log(error));

Kinh độ, vĩ độ của điểm kết thúc

await axios.get(`${url}=${endPoint}&api_key=${process.env.REACT_APP_GOONG_MAP_KEY}`)
    .then(res => {
      const points = res.data;
      setDestination(points.results[0].geometry.location);
    })
    .catch(error => console.log(error));

Sử dụng Method: GET và URL: "https://rsapi.goong.io/geocode?address={YOUR_LOCATION}&api_key={YOUR_API_KEY}" để lấy toạ độ của điểm đầu và điểm kết thúc.
"YOUR_LOCATION" chính là "startPoint" và "endPoint" được khai báo ban đầu, sau khi người dùng nhập địa điểm cần tìm server sẽ trả về toạ độ, sau đó sẽ được gán vào hai object là "origin" và "destination"

Truyền toạ độ điểm đầu và điểm cuối để vẽ tuyến đường qua 2 điểm

directionService
    .getDirections({
    // Truyền tham số vào đây
     origin: `${origin.lat},${origin.lng}`,
     destination: `${destination.lat},${destination.lng}`,
     vehicle: 'car'
    })
    .send()
    .then(function (response) {
    // Dữ liệu của tuyến đường được trả về
       var directions = response.body;
       var route = directions.routes[0];
       var geometry_string = route.overview_polyline.points;
       var geoJSON = polyline.toGeoJSON(geometry_string);
    // Bản đồ sẽ tiếp nhận dữ liệu
         mapRef.current.addSource('route', {
            'type': 'geojson',
            'data': geoJSON
          });
    // Tuyến đường sẽ được vẽ trên bản đồ với các thông số dưới đây
         mapRef.current.addLayer(
            {
              'id': 'route',
              'type': 'line',
              'source': 'route',
              'layout': {
                'line-join': 'round',
                'line-cap': 'round'
              },
              'paint': {
                'line-color': 'rgb(0, 153, 255)',
                'line-width': 8
              }
            },
            firstSymbolId
          );
        })

Tham khảo

Hiển thị bản đồ

Framework

React

Các bước thiết lập chung

Bản đồ

Autocomplete

Đánh dấu

Dẫn đường

Tham khảo

Vue2

Các bước thiết lập chung

Bản đồ

Autocomplete

Đánh dấu

Dẫn đường

Tham khảo

Vue3

Các bước thiết lập chung

Bản đồ

Autocomplete

Đánh dấu

Dẫn đường

Tham khảo

Angular

Các bước thiết lập chung

Bản đồ

Autocomplete

Đánh dấu

Dẫn đường

Tham khảo