Goong Documents
Thư viện Mobile

Thư viện Mobile

Goong sử dụng các thư viện mobile dựa trên Mapbox để cung cấp các yếu tố bản đồ cho các ứng dụng của bạn.

Hướng dẫn cài đặt và tài liệu:

Mapbox yêu cầu token để tải xuống SDK của họ, bạn có thể sử dụng token này bên dưới hoặc tạo token của riêng bạn.

sk.eyJ1IjoiaWJpbmgiLCJhIjoiY2t2YWZpdXdmMzd4cDMxbHBsNmU4NmNsMyJ9.WT8r42HijaCYAeUPq3xCxA

Hoặc sử dụng .netrc theo tài liệu bên dưới

machine api.mapbox.com
login mapbox
password sk.eyJ1IjoiaWJpbmgiLCJhIjoiY2t2YWZpdXdmMzd4cDMxbHBsNmU4NmNsMyJ9.WT8r42HijaCYAeUPq3xCxA

Hướng dẫn cài đặt

Kiểu bản đồ

Chúng tôi cung cấp các kiểu URL sau:

  • Sáng
https://tiles.goong.io/assets/goong_light_v2.json
  • Đường phố
https://tiles.goong.io/assets/goong_map_web.json
  • Tối
https://tiles.goong.io/assets/goong_map_dark.json
  • Dẫn đường ban ngày
https://tiles.goong.io/assets/navigation_day.json
  • Dẫn đường ban đêm
https://tiles.goong.io/assets/navigation_night.json

Ví dụ

Sau khi cài đặt, đặt styleURL thành styleURL của Goong

iOS

import Mapbox
class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
      let url = URL(string: "https://tiles.goong.io/assets/goong_map_web.json?api_key=your_maptiles_key")
      let mapView = MGLMapView(frame: view.bounds, styleURL: url)
          mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
          mapView.setCenter(CLLocationCoordinate2D(latitude: 21, longitude: 105), zoomLevel: 9, animated: false) 
          view.addSubview(mapView) 
      }
  }

Android

private var mapView: MapView? = null

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)

  Mapbox.getInstance(this, getString(R.string.mapbox_access_token))

  setContentView(R.layout.activity_main)

  mapView = findViewById(R.id.mapView)
  mapView?.onCreate(savedInstanceState)
  mapView?.getMapAsync { mapboxMap ->

  	mapboxMap.setStyle(Style.Builder().fromUri("https://tiles.goong.io/assets/goong_map_web.json?api_key=your_maptiles_key")) {
      // Map is set up and Goong style has loaded. Now you can add data or make other map adjustments
      
  	}

  }
}

React Native

export default class App extends Component {
  render() {
    return (
      <View style={styles.page}>
        <View style={styles.container}>
          <MapboxGL.MapView styleURL='https://tiles.goong.io/assets/goong_map_web.json?api_key=your_maptiles_key' />
        </View>
      </View>
    );
  }
}

Xem React Native MapView API

Flutter

Xem Map Styles