Flutter 地图集成插件tplmapsflutterplugin的使用

Flutter TPL Maps (v-1.6.4 OR v-2.0.0+)

Flutter TPL Maps 是一个用于 Flutter 应用程序的 Android 和 iOS 插件。它帮助你在应用中添加地图功能。API 自动处理对我们的 TPL Maps 服务器的访问、数据下载、地图显示和响应地图手势。你可以添加标记、形状、兴趣点、自定义地图样式等。

维护者

TPL Maps

Bilal Sipra - 信息技术主管 - bilal.sipra@tplmaps.com
Daniyal Ahmed Khan - Android 开发经理及团队负责人 - daniyal.khan@tplmaps.com
Muhammad Aamir - 高级软件工程师 - muhammad.aamir01@tplmaps.com

平台兼容性

本项目与 Android 和 iOS 兼容。本项目支持的 Android 最低 SDK 版本为 21。

开始使用

请按照以下步骤操作：

在 pubspec.yaml 文件中添加最新版本的包。
在 Android 清单文件中添加你的 TPL Maps Key。
在 iOS 项目中添加 tplservices.config 文件（从 api.tplmaps.com 下载并遵循 iOS 指南）。
在 Dart 类中导入 tplmapsflutterplugin 包。

import 'package:tplmapsflutterplugin/tplmapsflutterplugin.dart';

使用示例

return TplMapsView(
  isShowBuildings: true,
  isZoomEnabled: true,
  showZoomControls: true,
  isTrafficEnabled: true,
  mapMode: MapMode.NIGHT,
  enablePOIs: true,
  setMyLocationEnabled: false,
  myLocationButtonEnabled: false,
  showsCompass: true,
  allGesturesEnabled: true,
  tplMapsViewCreatedCallback: _callback,
);

void _callback(TplMapsViewController controller) {
  _controller = controller;
  controller.showBuildings(false);
  controller.showZoomControls(false);
  controller.setTrafficEnabled(false);
  controller.enablePOIs(true);
  controller.setMyLocationEnabled(true);
  controller.myLocationButtonEnabled(true);
  controller.showsCompass(false);
  controller.setCameraPositionAnimated(33.698047971892045, 73.06930062598059, 14.0);
  controller.addMarker(33.705349, 73.069788);
  controller.addMarker(33.698047971892045, 73.06930062598059);
  controller.setMapMode(MapMode.DEFAULT);
  bool isBuildingsEnabled = controller.isBuildingEnabled;
  print("isBuildingsEnabled: $isBuildingsEnabled");
  bool isTrafficEnabled = controller.isTrafficEnabled;
  print("isTrafficEnabled: $isTrafficEnabled");
  bool isPOIsEnabled = controller.isPOIsEnabled;
  print("isPOIsEnabled: $isPOIsEnabled");
}

绘制标记和形状

void _callback(TplMapsViewController controller) {
  _controller = controller;
};

void addMarker() {
  _controller.addMarker(33.705349, 73.069788);
};

void addPolyLine() {
  _controller.addPolyLine(33.705349, 73.069788, 33.705349, 73.069788);
};

void addCircle() {
  _controller.addCircle(33.705349, 73.069788);
};

void removeMarkers() {
  _controller.removeAllMarker();
};

void removePolyline() {
  _controller.removePolyline();
};

void removeAllCircles() {
  _controller.removeAllCircles();
};

// 设置其他选项
_controller.setZoomEnabled(true);
_controller.showBuildings(false);
_controller.showZoomControls(false);
_controller.setTrafficEnabled(false);
_controller.enablePOIs(true);
_controller.setMyLocationEnabled(true);
_controller.myLocationButtonEnabled(true);
_controller.showsCompass(false);
_controller.setCameraPositionAnimated(33.69804797189, 73.0693006259, 14.0);
_controller.setMapMode(MapMode.DEFAULT);
_controller.isBuildingEnabled;
_controller.isTrafficEnabled;
_controller.isPOIsEnabled;

手势控制

return TplMapsView(
  tPlMapsViewMarkerCallBack: _markerCallback,
);

void _markerCallback(String callback) {
  log(callback);
};

设置地点API

TPlSearchViewController tPlSearchViewController = TPlSearchViewController(
  "Atrium Mall", 
  24.8607, 
  67.0011, 
  (retrieveItemsCallback) {
    // 你将获得 JSON 列表响应
    print(retrieveItemsCallback);
  },
);

tPlSearchViewController.getSearchItems();

初始化反向地理编码参数以获取地址

TPlSearchViewController tPlSearchViewController = TPlSearchViewController(
  null, 
  24.8607, 
  67.0011, 
  (retrieveItemsCallback) {
    // 你将在这里获得传递位置的地址
    print(retrieveItemsCallback);
  },
);

tPlSearchViewController.getReverseGeocoding();

设置路由API

// 初始化 TPL 路由，设置起点和目的地的 LatLng
TPLRoutingViewController tplRoutingViewController = TPLRoutingViewController(
  24.820159, 
  67.123933, 
  24.830831, 
  67.080857, 
  (tplRoutingCallBack) => {
    // 你将获得 JSON 列表响应
    log(tplRoutingCallBack);
  },
);

tplRoutingViewController.getSearchItems();

设置初始相机位置

Container(
  child: TplMapsView(
    isZoomEnabled: true,
    mapMode: MapMode.DEFAULT,
    allGesturesEnabled: true,
    initialCameraPosition: CameraPosition(
      target: LatLng(33.723149149167504, 73.06167650992974),
      zoom: 14.0
    ),
  ),
)

添加标记、自定义标记和信息窗口

Container(
  child: TplMapsView(
    isZoomEnabled: true,
    mapMode: MapMode.DEFAULT,
    allGesturesEnabled: true,
    markers: [
      Marker(
        latLng: LatLng(33.723149149167504, 73.06167650992974)
      ),
      Marker(
        latLng: LatLng(33.726140321422804, 73.07676244254161),
        size: MarkerSize(width: 35, height: 35)
      ),
      Marker(
        latLng: LatLng(33.72968743970819, 73.09001725099304),
        size: MarkerSize(width: 70, height: 70),
        base64Marker: base64Image2
      ),
      Marker(
        latLng: LatLng(33.72208282119375, 73.09542295847615),
        base64Marker: base64Image3
      ),
      Marker(
        latLng: LatLng(33.73214836197533, 73.06687654459805),
        size: MarkerSize(width: 90, height: 90),
        base64Marker: base64Image1,
        infoWindow: InfoWindow(
          title: "Demo title",
          description: "This is Demo Description"
        )
      ),
    ],
  ),
)

添加圆形区域

Container(
  child: TplMapsView(
    isZoomEnabled: true,
    mapMode: MapMode.DEFAULT,
    allGesturesEnabled: true,
    circles: [
      Circle(
        latLng: LatLng(33.723149149167504, 73.06167650992974),
        radius: 1000,
        color: "#FF0000"
      ),
    ],
  ),
)

创建路线

Container(
  child: TplMapsView(
    isZoomEnabled: true,
    mapMode: MapMode.DEFAULT,
    allGesturesEnabled: true,
    polyLine: Polyline(
      startLatLng: LatLng(33.71210524028265, 73.05779999610466),
      endLatLng: LatLng(33.68816353784396, 72.98338785144722),
      color: "#FFF000",
      width: 5,
      apiKey: myKey,
    ),
  ),
)

添加多边形

Container(
  child: TplMapsView(
    isZoomEnabled: true,
    mapMode: MapMode.DEFAULT,
    allGesturesEnabled: true,
    polygon: Polygon(coordinates: [
      LatLng(73.07824953648002, 33.735870643214774),
      LatLng(73.07500992070422, 33.736504540028584),
      LatLng(73.07424773695865, 33.73390100779751),
      LatLng(73.08020704883475, 33.73236925579299),
      LatLng(73.07457476129804, 33.73022716672756),
      LatLng(73.08081375969778, 33.72709474879913),
      LatLng(73.08962864042788, 33.73553948921669),
    ], color: "#000000", outerLineWidth: 10, isClickable: false),
  ),
)

通过 latLng 列表添加折线

Container(
  child: TplMapsView(
    isZoomEnabled: true,
    mapMode: MapMode.DEFAULT,
    allGesturesEnabled: true,
    polyLines: [
      LatLng(73.07824953648002, 33.735870643214774),
      LatLng(73.07500992070422, 33.736504540028584),
      LatLng(73.07424773695865, 33.73390100779751),
      LatLng(73.08020704883475, 33.73236925579299),
      LatLng(73.07457476129804, 33.73022716672756),
      LatLng(73.08081375969778, 33.72709474879913),
      LatLng(73.08962864042788, 33.73553948921669),
    ],
  ),
)

更多关于Flutter地图集成插件tplmapsflutterplugin的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼

更多关于Flutter地图集成插件tplmapsflutterplugin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

tplmapsflutterplugin 是一个用于在 Flutter 应用中集成 TPL Maps 的插件。TPL Maps 是一个提供地图和位置服务的平台，类似于 Google Maps 或 Mapbox。通过 tplmapsflutterplugin，你可以在 Flutter 应用中轻松地显示地图、添加标记、绘制路线等。

以下是如何在 Flutter 项目中使用 tplmapsflutterplugin 的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 tplmapsflutterplugin 的依赖：

dependencies:
  flutter:
    sdk: flutter
  tplmapsflutterplugin: ^latest_version

然后运行 flutter pub get 来获取依赖。

2. 获取 API 密钥

在使用 TPL Maps 之前，你需要从 TPL Maps 的官方网站获取一个 API 密钥。这个密钥将用于验证你的应用。

3. 初始化地图

在你的 Dart 代码中，导入 tplmapsflutterplugin 并初始化地图：

import 'package:flutter/material.dart';
import 'package:tplmapsflutterplugin/tplmapsflutterplugin.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  [@override](/user/override)
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  TPLMapsController? _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化地图控制器
    TPLMapsController.init('YOUR_API_KEY').then((controller) {
      setState(() {
        _controller = controller;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TPL Maps in Flutter'),
      ),
      body: _controller == null
          ? Center(child: CircularProgressIndicator())
          : TPLMapView(controller: _controller!),
    );
  }
}

4. 添加标记和绘制路线

你可以使用 TPLMapsController 来添加标记和绘制路线：

void _addMarker() {
  if (_controller != null) {
    _controller!.addMarker(
      TPLMarkerOptions(
        position: TPLLatLng(33.6844, 73.0479), // 标记的位置
        title: 'Islamabad', // 标记的标题
        snippet: 'Capital of Pakistan', // 标记的副标题
      ),
    );
  }
}

void _drawRoute() {
  if (_controller != null) {
    _controller!.drawRoute(
      TPLRouteOptions(
        origin: TPLLatLng(33.6844, 73.0479), // 起点
        destination: TPLLatLng(33.6167, 73.1000), // 终点
        waypoints: [
          TPLLatLng(33.6500, 73.0667), // 途经点
        ],
      ),
    );
  }
}

5. 处理地图事件

你可以监听地图的各种事件，例如点击标记、地图移动等：

void _setupMapListeners() {
  if (_controller != null) {
    _controller!.onMarkerTap.listen((markerId) {
      print('Marker tapped: $markerId');
    });

    _controller!.onMapMoved.listen((cameraPosition) {
      print('Map moved to: ${cameraPosition.target}');
    });
  }
}

6. 释放资源

在页面销毁时，记得释放地图资源：

[@override](/user/override)
void dispose() {
  _controller?.dispose();
  super.dispose();
}