文章目錄

• Flutter 調用地圖軟件（高德、百度、騰訊、蘋果）
• 一、說明
• • • 第 1 類：App 集成導航功能
    • 第 2 類：跳轉第三方地圖軟件
• 二、實現步驟
• • 使用
  • • 1、添加插件：
    • 2、iOS 配置 info.plist
    • 3、編寫工具類同時實現另類國際化
    • 4.使用：

官方倉庫

Flutter 調用地圖軟件（高德、百度、騰訊、蘋果）

一、說明

我們在應用開發中經常需要用到地圖定位或導航的功能，而集成該功能的方式總的來說分為兩類：

第 1 類：App 集成導航功能

這種方式的優點是可以進行深度地圖定制，比如出行或外賣軟件會有自己的定制，上面會有司機或騎手的小圖標，但是集成開發成本也是比較高的。

第 2 類：跳轉第三方地圖軟件

這種方式是比較簡單的一種，把目的地傳給第三方導航軟件，比如百度地圖，它會為你提供導航功能。這種方式開發成本低，可快速提供導航功能。

由于 Flutter 技術出來不久，普及率算不上很高，目前很多導航定位還未對其提供專門支持，如果想集成導航功能的話，開發成本非常高，所以我們會考慮用跳轉三方地圖軟件的方式實現導航功能。

二、實現步驟

使用

1、添加插件：

dependencies:map_launcher: ^1.1.2

2、iOS 配置 info.plist

<key>LSApplicationQueriesSchemes</key> <array><string>comgooglemaps</string><string>baidumap</string><string>iosamap</string><string>waze</string><string>yandexmaps</string><string>yandexnavi</string><string>citymapper</string><string>mapswithme</string><string>osmandmaps</string><string>dgis</string><string>qqmap</string> </array>

3、編寫工具類同時實現另類國際化

import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:map_launcher/map_launcher.dart';class MapsSheet {BuildContext context;Function(AvailableMap map) onMapTap;MapsSheet({this.context, this.onMapTap});void show() async {List<AvailableMap> availableMaps = await MapLauncher.installedMaps;for (var map in availableMaps) {map.mapName = getLocalName(amap: map);}showModalBottomSheet(// backgroundColor: Colors.transparent,context: context,builder: (BuildContext context) {return Container(padding: EdgeInsets.only(left: 10),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.all(Radius.circular(20)),),height: 400,child: Column(children: <Widget>[Expanded(child: SingleChildScrollView(child: Container(decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.all(Radius.circular(16)),),child: Wrap(children: <Widget>[for (var map in availableMaps)ListTile(onTap: () => onMapTap(map),title: Text(map.mapName),leading: SvgPicture.asset(map.icon,height: 30.0,width: 30.0,),),],),),),),],),);},);}String getLocalName({AvailableMap amap}) {switch (amap.mapType) {case MapType.amap:return '高德地圖';case MapType.baidu:return '百度地圖';case MapType.tencent:return '騰訊地圖';case MapType.google:return '谷歌地圖';default:return amap.mapName;}} }

4.使用：

import 'package:map_launcher/map_launcher.dart';DirectionsMode directionsMode = DirectionsMode.driving;List<Coords> waypoints = [Coords(_local.lat, _local.lng),];MapsSheet mapsheet = MapsSheet(context: context,onMapTap: (map) {map.showDirections(destination: Coords(_local.lat, _local.lng),destinationTitle: _local.addr,origin: _local.lat == null || _local.lng == null? null: Coords(_local.lat, _local.lng),directionsMode: directionsMode,waypoints: waypoints,);},);mapsheet.show();

ionsMode,
waypoints: waypoints,
);
},
);
mapsheet.show();

總結

以上是生活随笔為你收集整理的Flutter 调用地图软件（高德、百度、腾讯、苹果）同时实现另类国际化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。