Flutter地图工具插件maputil的使用
Flutter地图工具插件maputil的使用
MAP UTIL
此包将帮助你处理谷歌地图相关的功能，例如：
- 简单创建谷歌地图
- 在谷歌地图上绘制多边形
- 设置谷歌地图的中心边界
- 获取用户当前地址
- 移动谷歌地图的摄像头
安装
在你的 pubspec.yaml 文件中添加以下依赖项：
dart pub add maputil使用
以下是一个完整的示例，展示如何使用 maputil 插件来实现谷歌地图的基本功能。
示例代码
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:maputil/maputil.dart'; // 引入 maputil 插件
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
static const CameraPosition _kGooglePlex = CameraPosition(
target: LatLng(11.566375994524854, 104.92429543286562),
zoom: 14.4746,
);
Set<Marker> markers = {}; // 地图标记集合
BitmapDescriptor? pinIconMarker; // 自定义图标
[@override](/user/override)
void initState() {
// 获取当前位置
MapUtils.getCurrentLocation().then((value) {
// 将摄像头移动到当前位置
MapUtils.cameraMoveGoogleMap(
latlng: LatLng(value.latitude, value.longitude), zoom: 12.15);
}).onError((error, stackTrace) {
// 如果用户拒绝权限，则移动到默认位置
MapUtils.cameraMoveGoogleMap(
latlng: const LatLng(11.566375994524854, 104.92429543286562),
zoom: 12.15);
});
getIconMarker(); // 加载自定义图标
super.initState();
}
getIconMarker() async {
pinIconMarker = await MapUtils.getMarkerImageFromUrl(
imageAsset: 'assets/images/Pin.png', targetWidth: 120)
.then((value) {
markers.add(Marker(
markerId: const MarkerId("you"),
position: const LatLng(11.566375994524854, 104.92429543286562),
icon: value));
setState(() {});
debugPrint("marker ${markers.length}");
return null;
});
}
[@override](/user/override)
void dispose() {
MapUtils.dispose(); // 释放资源
super.dispose();
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
GoogleMap(
markers: markers, // 添加标记
myLocationEnabled: true, // 显示当前位置
mapType: MapType.normal, // 地图类型
initialCameraPosition: _kGooglePlex, // 初始地图位置
onMapCreated: MapUtils.onCreatedGoogleMap, // 地图创建回调
polygons: MapUtils.drawPolygon(
points: polygon, // 绘制多边形
strokeColor: Colors.black, // 边框颜色
fillColor: Colors.transparent, // 填充颜色
strokeWidth: 2), // 边框宽度
),
Positioned(
top: 30,
left: 10,
child: Row(
children: [
Container(
color: Colors.black,
height: 50,
child: TextButton(
child: const Text("Polygon1"), // 按钮文本
onPressed: () {
polygon.clear(); // 清空多边形
polygon.addAll(polygon1); // 添加新的多边形
setState(() {}); // 更新界面
},
),
),
Container(
color: Colors.red,
height: 50,
child: TextButton(
child: const Text("Polygon2"),
onPressed: () {
polygon.clear();
polygon.addAll(polygon2);
setState(() {});
},
),
),
Container(
color: Colors.black,
height: 50,
child: TextButton(
child: const Text("SetBound"),
onPressed: () {
MapUtils.setBoundTargetGoogleMap(polygon); // 设置边界
setState(() {});
},
),
),
],
),
),
],
),
);
}
List polygon = []; // 多边形点集合
List polygon1 = [
[104.901238307, 11.5855313270001], // 多边形点1
[104.907311287, 11.583454402],
[104.907590058, 11.5834229860001],
[104.905946936, 11.5802220840001],
[104.905013267, 11.5782716460001],
[104.904881932, 11.577903334],
[104.901584679, 11.577058717],
[104.89954505, 11.57661446],
[104.894397014, 11.5787733280001],
[104.89146851, 11.583366422],
[104.891497196, 11.58638495],
[104.891411848, 11.587041093],
[104.893191625, 11.5883492180001],
[104.896893164, 11.5907645],
[104.897236634, 11.590788162],
[104.900676238, 11.585723548],
[104.901238307, 11.5855313270001]
];
List polygon2 = [
[104.898983171, 11.576850091],
[104.89954505, 11.57661446],
[104.901584679, 11.577058717],
[104.904881932, 11.577903334],
[104.904604242, 11.577124586],
[104.904515147, 11.5766426650001],
[104.90443925, 11.575640164],
[104.904486502, 11.5751309200001],
[104.904650513, 11.574532773],
[104.903582701, 11.57462215],
[104.903882962, 11.5743246960001],
[104.904384189, 11.572792968],
[104.90445933, 11.572193793],
[104.89945171, 11.571754255],
[104.888048448, 11.5703243630001],
[104.887553954, 11.5797397860001],
[104.887378156, 11.582405297],
[104.887406181, 11.5831215590001],
[104.887503956, 11.583395965],
[104.88782894, 11.583932078],
[104.888478999, 11.5847841660001],
[104.888902365, 11.585203525],
[104.891411848, 11.587041093],
[104.891497196, 11.58638495],
[104.89146851, 11.583366422],
[104.894397014, 11.5787733280001],
[104.898983171, 11.576850091]
];
}
1 回复
更多关于Flutter地图工具插件maputil的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
map_util 是一个用于在 Flutter 中打开外部地图应用程序（如 Google 地图、Apple 地图等）的插件。它允许你通过传递经度和纬度来打开地图，并显示特定位置。以下是使用 map_util 插件的基本步骤：
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 map_util 插件的依赖：
dependencies:
flutter:
sdk: flutter
map_util: ^0.1.1 # 请检查最新版本然后运行 flutter pub get 来获取依赖。
2. 导入包
在你的 Dart 文件中导入 map_util 包：
import 'package:map_util/map_util.dart';3. 使用 map_util 打开地图
你可以使用 MapUtil 类中的 launchMap 方法来打开外部地图应用程序。以下是一个简单的示例：
import 'package:flutter/material.dart';
import 'package:map_util/map_util.dart';
class MapExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Map Util Example'),
),
body: Center(
child: ElevatedButton(
onPressed: () async {
// 经纬度
double latitude = 37.7749;
double longitude = -122.4194;
// 打开地图
bool isMapOpened = await MapUtils.launchMap(latitude, longitude);
if (!isMapOpened) {
// 如果地图应用程序未打开，显示错误消息
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('无法打开地图应用程序')),
);
}
},
child: Text('打开地图'),
),
),
);
}
}
void main() => runApp(MaterialApp(
home: MapExample(),
));4. 运行应用程序
运行你的 Flutter 应用程序，点击按钮后，系统会尝试打开默认的地图应用程序，并显示指定的经纬度位置。
5. 可选参数
launchMap 方法还支持一些可选参数，例如：
zoom：缩放级别。title：位置的标题。description：位置的描述。
例如：
await MapUtils.launchMap(latitude, longitude, zoom: 15, title: 'San Francisco', description: 'A beautiful city');