Flutter版本高德地图功能目前十分简陋,不建议制作复杂功能。
注意:地图的坐标经纬度回显默认是度为单位,一般GPS获取的可以直接回显位置不需要进行转换
需要安装的依赖
amap_flutter_map: ^3.0.0
amap_flutter_base: ^3.0.0
1、页面代码
import 'dart:math';
import 'package:amap_flutter_base/amap_flutter_base.dart';
import 'package:amap_flutter_map/amap_flutter_map.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_project/src/pages/amapPage/state.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../widgets/provider/changeNotifierProvider_widget.dart';
class AmapPage extends StatefulWidget {
const AmapPage({super.key});
@override
State<AmapPage> createState() => _AmapPageState();
}
class _AmapPageState extends State<AmapPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("地图定位")
),
// ChangeNotifierProviderWidget封装的provider状态管理器
body: ChangeNotifierProviderWidget<AMapState>(
model: AMapState(),
builder: (_, model, widget) {
// 每次build都需要重新生成地图
model.aMapWidget();
return Container(
child: model.map,
)
),
],
);
})
);
}
}
2、页面对应的状态代码
late AMapController aMapController;
// 获取审图号
void getApprovalNumber(AMapController mapController) async {
// 用于后面对地图中心点,角度等信息进行编辑
aMapController = mapController;
//普通地图审图号
String? mapContentApprovalNumber = await mapController?.getMapContentApprovalNumber();
//卫星地图审图号
String? satelliteImageApprovalNumber = await mapController?.getSatelliteImageApprovalNumber();
print('地图审图号(普通地图): $mapContentApprovalNumber');
print('地图审图号(卫星地图): $satelliteImageApprovalNumber');
}
late AMapWidget map;
void aMapWidget() {
map = AMapWidget(
privacyStatement: const AMapPrivacyStatement(hasContains: true, hasShow: true, hasAgree: true),
apiKey: AMapApiKey(
androidKey: "" // 填入高德地图的key值,在高德地图管理平台获取
),
compassEnabled: true, // 显示指南针
markers: Set<Marker>.of(_markers.values), // marker定点
onMapCreated: getApprovalNumber,
);
}
3、修改地图中心点
LatLng? markerPosition; // 标记点坐标
// 设置地图中心点位置
void moveCamera() {
if(markerPosition == null) return;
aMapController.moveCamera(
CameraUpdate.newCameraPosition(
CameraPosition(
//中心点
target: markerPosition!,
//缩放级别
zoom: 15,
//俯仰角0°~45°(垂直与地图时为0)
tilt: 30,
//偏航角 0~360° (正北方为0)
bearing: 0),
),
animated: true,
);
}
4、定义标记点
注:官方示例Marker标记点的气泡信息窗口只能通过点击方式进行显示,不能设置成一直显示状态
Map<String, Marker> _markers = <String, Marker>{}; // 标记点集合
Marker? marker;
// 定点
void setMarker() {
marker ??= Marker(
position: markerPosition!,
icon: BitmapDescriptor.fromIconPath('assets/images/location_marker.png'),
);
// 修改标记中心点 - 使用copyWith方法进行修改某项参数
marker = marker!.copyWith(positionParam: markerPosition);
// 一个标记点对应一个id,通过id修改指定点参数;注:每次使用Marker()会生成一个新的id
_markers[marker!.id] = marker!;
notifyListeners();
}
祝发大财!!!!!