This is the 12th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

How does Flutter implement map navigation?

Hello everyone, I am Nuts, my public account “Nut front”,

I originally brought the basic part of Flutter today, but someone asked how Flutter can achieve map navigation function, so today I would like to share with you

primers

How can an APP have no navigation function? We often need the function of map positioning or navigation in application development, and the way to integrate this function is generally divided into two categories:

Class 1: App integrated navigation function

The advantage of this approach is that in-depth map customization can be carried out. For example, travel or food delivery software will have its own customization, which will have a small icon of the driver or rider, but the cost of integrated development is relatively high. So it’s largely not used

Category 2: jump to third party map software

The easy way to do this is to send your destination to a third-party navigation app, such as Amap, which will provide you with navigation. This approach is cheap to develop and provides quick navigation.

So how to implement Flutter, I’ve provided a solution for you to look at,

The first step is to introduce the plug-in

Flutter_svg: ^0.19.1 ## Import map_launcher: ^1.1.3+1Copy the code

For iOS, add the URL scheme to the info.plist file

<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>
    <string>here-location</string>
</array>
Copy the code

usage

Get a list of installed maps and launch first

import 'package:map_launcher/map_launcher.dart'; final availableMaps = await MapLauncher.installedMaps; print(availableMaps); Await availableMaps. First. ShowMarker (coords: coords (28, 120), the title: "nuts front-end,");Copy the code

Check if the map is installed and start it

import 'package:map_launcher/map_launcher.dart';
​
if (await MapLauncher.isMapAvailable(MapType.google)) {
  await MapLauncher.showMarker(
    mapType: MapType.google,
    coords: coords,
    title: title,
    description: description,
  );
}
Copy the code

encapsulation

import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:map_launcher/map_launcher.dart'; class MapsSheet { static show({ @required BuildContext context, @required Function(AvailableMap map) onMapTap, }) async { final availableMaps = await MapLauncher.installedMaps; for (var map in availableMaps) { map.mapName = getLocalName(amap: map); } showModalBottomSheet( context: context, backgroundColor: Colors.transparent, builder: (BuildContext context) { return SafeArea( child: Container( decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(20)), ), child: Column( children: <Widget>[ Expanded( child: SingleChildScrollView( child: Container( child: Wrap( children: <Widget>[ for (var map in availableMaps) ListTile( onTap: () => onMapTap(map), title: Text(map.mapName), leading: SvgPicture. Asset (map icon, height: 50.0, width: 50.0,),),),),),),),),),),); }); }} String getLocalName({AvailableMap amap}) {switch (amap.mapType) {case mapType. Case MapType. Baidu: return 'baidu map '; Case MapType. Tencent: return 'Tencent map '; Case MapType. Google: return 'Google Maps '; Case maptype. apple: return 'Apple map '; default: return amap.mapName; }}Copy the code

use

MapsSheet.show( context: context, onMapTap: (map) { map.showMarker( coords: Coords(_local.lat, _local.lng), title: _local.addr, zoom: 20, ); });Copy the code

Results show

That’s all we have to share today. Welcome to learn about Flutter and discuss the use of Flutter.