flutter 使用高德地图
在Flutter中使用高德地图,你可以使用amap_location
插件来获取定位信息,或者使用amap_flutter_map
插件来展示地图和标记。
首先,你需要在pubspec.yaml
文件中添加依赖:
dependencies:
amap_flutter_map: ^0.2.4
amap_location: ^0.2.2
然后运行flutter pub get
来安装依赖。
以下是一个简单的例子,展示如何在Flutter中使用高德地图:
import 'package:flutter/material.dart';
import 'package:amap_flutter_map/amap_flutter_map.dart';
import 'package:amap_location/amap_location.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
AMapController controller;
Map<String, double> _position = {};
@override
void initState() {
super.initState();
// 初始化AMapLocationClient
AMapLocationClient.setup(new AMapLocationOption(
desiredAccuracy: CLLocationAccuracy.kCLLocationAccuracyHundredMeters));
// 获取位置信息
_initLocation();
}
// 获取当前位置
void _initLocation() async {
await AMapLocationClient.startLocation();
AMapLocationClient.onLocationUpate.listen((AMapLocation loc) {
if (loc != null) {
setState(() {
_position = {
'latitude': loc.latitude,
'longitude': loc.longitude
};
});
}
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('高德地图示例'),
),
body: _position.isEmpty
? Center(child: Text('正在获取位置...'))
: AMapView(
amapController: controller,
mapType: MapType.satellite,
zoomLevel: 18.0,
centerCoordinate: LatLng(
_position['latitude'],
_position['longitude'],
),
markers: [
Marker(
width: 80.0,
height: 80.0,
point: LatLng(
_position['latitude'],
_position['longitude'],
),
builder: (context) => Icon(Icons.location_on))
],
),
),
);
}
}
确保你已经在高德开放平台注册应用,并获取了正确的API Key,然后在代码中设置。
这个例子中,首先初始化了AMapLocationClient来获取当前位置,然后在获取位置成功后,展示了一个高德地图,并在地图中心标记了位置,同时展示了一个位置图标。
评论已关闭