Документация
packages пакеты
flutter_map | OpenStreetMap - бесплатные карты для Flutter

Егор Долгов

05.04.2019 12:28:50 (обновлено 21.04.2019 23:53:24)

За все время: 5678 просмотров, 2811 посетителей.
За последние 30 дней: 73 просмотра, 47 посетителей.

Пакет flutter_map | OpenStreetMap - бесплатные карты для Flutter

Если вам нужны карты, бесплатно, быстро и сейчас. То стоит обратить свое внимание на проект OpenStreetMap.

OpenStreetMap является картой мира, созданной такими же людьми, как и вы, и может свободно использоваться под открытой лицензией.

Для отображения тайловых карт удобен пакет flutter_map, вместе с этим пакетом нужно подключить еще пакет latlong
Подключение в файле зависимостей pubspec.yaml:

dependencies:
  flutter_map: any #последния версия пакета
  latlong: 0.6.1 #этот пакет нужно подключить для вызова объекта LatLng

Подключение в файле .dart:
import 'package:flutter_map/flutter_map.dart'; import 'package:latlong/latlong.dart';

Пример вставки виджета с картой

Widget build(BuildContext context) {
  return new FlutterMap(
    options: new MapOptions(
      center: new LatLng(51.5, -0.09),
      zoom: 13.0,
    ),
    layers: [
      new TileLayerOptions(
        urlTemplate: "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
        additionalOptions: {
          'accessToken': '<PUT_ACCESS_TOKEN_HERE>',
          'id': 'mapbox.streets',
        },
      ),
      new MarkerLayerOptions(
        markers: [
        new Marker(
          width: 80.0,
          height: 80.0,
          point: new LatLng(51.5, -0.09),
          builder: (ctx) => new Container(child: new FlutterLogo()))
        ])]);
}

Для использования карт, вам нужен сервер карт работающий с OpenStreetMap.
Такой сервер можно создать самим или зарегистрироваться и получить доступ на существующих картографических сервисах.
Но есть и открытые проекты, к примеру http://maps.sputnik.ru

Условия использования АПИ Карт Спутник смотрите на официальном сайте http://api.sputnik.ru/maps/

FlutterMap( options: MapOptions( center: LatLng(59.939095, 30.315868), zoom: 10.0, minZoom: 8, maxZoom: 16), layers: [ TileLayerOptions( urlTemplate: "http://tiles.maps.sputnik.ru/{z}/{x}/{y}.png", )])

Подборка заметок