333 lines
13 KiB
Dart
333 lines
13 KiB
Dart
|
import 'dart:math';
|
||
|
|
|
||
|
|
import 'package:amap_map_fluttify/amap_map_fluttify.dart';
|
||
|
|
import 'package:decorated_flutter/decorated_flutter.dart';
|
||
|
|
import 'package:flutter/material.dart';
|
||
|
|
|
||
|
|
final _assetsIcon = AssetImage('images/test_icon.png');
|
||
|
|
|
||
|
|
class MultiMapScreen extends StatefulWidget {
|
||
|
|
@override
|
||
|
|
_MultiMapScreenState createState() => _MultiMapScreenState();
|
||
|
|
}
|
||
|
|
|
||
|
|
class _MultiMapScreenState extends State<MultiMapScreen> {
|
||
|
|
late AmapController _controller1;
|
||
|
|
late AmapController _controller2;
|
||
|
|
late AmapController _controller;
|
||
|
|
String _currentInstance = '地图1';
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
return Scaffold(
|
||
|
|
appBar: AppBar(title: const Text('自定义地图')),
|
||
|
|
body: DecoratedColumn(
|
||
|
|
children: <Widget>[
|
||
|
|
Flexible(
|
||
|
|
child: AmapView(
|
||
|
|
key: Key('map1'),
|
||
|
|
showZoomControl: false,
|
||
|
|
maskDelay: Duration(milliseconds: 500),
|
||
|
|
onMapCreated: (controller) async {
|
||
|
|
_controller1 = controller;
|
||
|
|
_controller = _controller1;
|
||
|
|
},
|
||
|
|
),
|
||
|
|
),
|
||
|
|
Flexible(
|
||
|
|
child: AmapView(
|
||
|
|
key: Key('map2'),
|
||
|
|
showZoomControl: false,
|
||
|
|
maskDelay: Duration(milliseconds: 500),
|
||
|
|
onMapCreated: (controller) async {
|
||
|
|
_controller2 = controller;
|
||
|
|
},
|
||
|
|
),
|
||
|
|
),
|
||
|
|
Flexible(
|
||
|
|
child: DecoratedColumn(
|
||
|
|
scrollable: true,
|
||
|
|
divider: Divider(height: 1),
|
||
|
|
children: <Widget>[
|
||
|
|
// DiscreteSetting(
|
||
|
|
// head: '选择地图实例 当前实例: $_currentInstance',
|
||
|
|
// options: <String>['地图1', '地图2'],
|
||
|
|
// onSelected: (String value) {
|
||
|
|
// switch (value) {
|
||
|
|
// case '地图1':
|
||
|
|
// setState(() {
|
||
|
|
// _currentInstance = '地图1';
|
||
|
|
// _controller = _controller1;
|
||
|
|
// });
|
||
|
|
// break;
|
||
|
|
// case '地图2':
|
||
|
|
// setState(() {
|
||
|
|
// _currentInstance = '地图2';
|
||
|
|
// _controller = _controller2;
|
||
|
|
// });
|
||
|
|
// break;
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// ),
|
||
|
|
// BooleanSetting(
|
||
|
|
// head: '是否显示定位',
|
||
|
|
// onSelected: (value) async {
|
||
|
|
// await _controller.showMyLocation(MyLocationOption(
|
||
|
|
// show: value,
|
||
|
|
// ));
|
||
|
|
// },
|
||
|
|
// ),
|
||
|
|
// DiscreteSetting(
|
||
|
|
// head: '选择定位模式',
|
||
|
|
// options: <String>[
|
||
|
|
// '只定位不移动地图到中心',
|
||
|
|
// '定位一次并移动地图到中心',
|
||
|
|
// '连续定位并跟随',
|
||
|
|
// '连续定位跟随方向',
|
||
|
|
// ],
|
||
|
|
// onSelected: (String value) async {
|
||
|
|
// if (value == '只定位不移动地图到中心') {
|
||
|
|
// await _controller.showMyLocation(MyLocationOption(
|
||
|
|
// myLocationType: MyLocationType.Show,
|
||
|
|
// ));
|
||
|
|
// } else if (value == '定位一次并移动地图到中心') {
|
||
|
|
// await _controller.showMyLocation(MyLocationOption(
|
||
|
|
// myLocationType: MyLocationType.Locate,
|
||
|
|
// ));
|
||
|
|
// } else if (value == '连续定位并跟随') {
|
||
|
|
// await _controller.showMyLocation(MyLocationOption(
|
||
|
|
// myLocationType: MyLocationType.Follow,
|
||
|
|
// ));
|
||
|
|
// } else if (value == '连续定位跟随方向') {
|
||
|
|
// await _controller.showMyLocation(MyLocationOption(
|
||
|
|
// myLocationType: MyLocationType.Rotate,
|
||
|
|
// ));
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// ),
|
||
|
|
ListTile(
|
||
|
|
title: Center(child: Text('获取当前位置经纬度')),
|
||
|
|
onTap: () async {
|
||
|
|
final latLng = await _controller.getLocation();
|
||
|
|
toast('当前经纬度: ${latLng.toString()}');
|
||
|
|
},
|
||
|
|
),
|
||
|
|
ListTile(
|
||
|
|
title: Center(child: Text('使用自定义定位图标')),
|
||
|
|
onTap: () async {
|
||
|
|
await _controller.showMyLocation(MyLocationOption(
|
||
|
|
myLocationType: MyLocationType.Rotate,
|
||
|
|
iconProvider: _assetsIcon,
|
||
|
|
));
|
||
|
|
},
|
||
|
|
),
|
||
|
|
// BooleanSetting(
|
||
|
|
// head: '是否显示室内地图',
|
||
|
|
// onSelected: (value) {
|
||
|
|
// _controller.showIndoorMap(value);
|
||
|
|
// },
|
||
|
|
// ),
|
||
|
|
// DiscreteSetting(
|
||
|
|
// head: '切换地图图层',
|
||
|
|
// options: ['正常视图', '卫星视图', '黑夜视图', '导航视图', '公交视图'],
|
||
|
|
// onSelected: (value) {
|
||
|
|
// switch (value) {
|
||
|
|
// case '正常视图':
|
||
|
|
// _controller.setMapType(MapType.Standard);
|
||
|
|
// break;
|
||
|
|
// case '卫星视图':
|
||
|
|
// _controller.setMapType(MapType.Satellite);
|
||
|
|
// break;
|
||
|
|
// case '黑夜视图':
|
||
|
|
// _controller.setMapType(MapType.Night);
|
||
|
|
// break;
|
||
|
|
// case '导航视图':
|
||
|
|
// _controller.setMapType(MapType.Navi);
|
||
|
|
// break;
|
||
|
|
// case '公交视图':
|
||
|
|
// _controller.setMapType(MapType.Bus);
|
||
|
|
// break;
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// ),
|
||
|
|
// DiscreteSetting(
|
||
|
|
// head: '切换语言',
|
||
|
|
// options: ['中文', '英文'],
|
||
|
|
// onSelected: (value) {
|
||
|
|
// switch (value) {
|
||
|
|
// case '中文':
|
||
|
|
// _controller.setMapLanguage(Language.Chinese);
|
||
|
|
// break;
|
||
|
|
// case '英文':
|
||
|
|
// _controller.setMapLanguage(Language.English);
|
||
|
|
// break;
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// ),
|
||
|
|
// DiscreteSetting(
|
||
|
|
// head: '精度圈边框颜色',
|
||
|
|
// options: ['红色', '绿色', '蓝色'],
|
||
|
|
// onSelected: (value) {
|
||
|
|
// switch (value) {
|
||
|
|
// case '红色':
|
||
|
|
// _controller.showMyLocation(MyLocationOption(
|
||
|
|
// strokeColor: Colors.red,
|
||
|
|
// strokeWidth: 2,
|
||
|
|
// ));
|
||
|
|
// break;
|
||
|
|
// case '绿色':
|
||
|
|
// _controller.showMyLocation(MyLocationOption(
|
||
|
|
// strokeColor: Colors.green,
|
||
|
|
// strokeWidth: 2,
|
||
|
|
// ));
|
||
|
|
// break;
|
||
|
|
// case '蓝色':
|
||
|
|
// _controller.showMyLocation(MyLocationOption(
|
||
|
|
// strokeColor: Colors.blue,
|
||
|
|
// strokeWidth: 2,
|
||
|
|
// ));
|
||
|
|
// break;
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// ),
|
||
|
|
// DiscreteSetting(
|
||
|
|
// head: '精度圈填充颜色',
|
||
|
|
// options: ['红色', '绿色', '蓝色'],
|
||
|
|
// onSelected: (value) {
|
||
|
|
// switch (value) {
|
||
|
|
// case '红色':
|
||
|
|
// _controller.showMyLocation(MyLocationOption(
|
||
|
|
// fillColor: Colors.red,
|
||
|
|
// strokeWidth: 2,
|
||
|
|
// ));
|
||
|
|
// break;
|
||
|
|
// case '绿色':
|
||
|
|
// _controller.showMyLocation(MyLocationOption(
|
||
|
|
// fillColor: Colors.green,
|
||
|
|
// strokeWidth: 2,
|
||
|
|
// ));
|
||
|
|
// break;
|
||
|
|
// case '蓝色':
|
||
|
|
// _controller.showMyLocation(MyLocationOption(
|
||
|
|
// fillColor: Colors.blue,
|
||
|
|
// strokeWidth: 2,
|
||
|
|
// ));
|
||
|
|
// break;
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// ),
|
||
|
|
// DiscreteSetting(
|
||
|
|
// head: '精度圈边框宽度',
|
||
|
|
// options: ['2', '4', '8'],
|
||
|
|
// onSelected: (value) {
|
||
|
|
// switch (value) {
|
||
|
|
// case '2':
|
||
|
|
// _controller.showMyLocation(MyLocationOption(
|
||
|
|
// strokeWidth: 2,
|
||
|
|
// ));
|
||
|
|
// break;
|
||
|
|
// case '4':
|
||
|
|
// _controller.showMyLocation(MyLocationOption(
|
||
|
|
// strokeWidth: 4,
|
||
|
|
// ));
|
||
|
|
// break;
|
||
|
|
// case '8':
|
||
|
|
// _controller.showMyLocation(MyLocationOption(
|
||
|
|
// strokeWidth: 8,
|
||
|
|
// ));
|
||
|
|
// break;
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// ),
|
||
|
|
// BooleanSetting(
|
||
|
|
// head: '是否显示路况信息',
|
||
|
|
// onSelected: (value) {
|
||
|
|
// _controller.showTraffic(value);
|
||
|
|
// },
|
||
|
|
// ),
|
||
|
|
ListTile(
|
||
|
|
title: Center(child: Text('获取地图中心点')),
|
||
|
|
onTap: () async {
|
||
|
|
final center = await _controller.getCenterCoordinate();
|
||
|
|
toast(
|
||
|
|
'center: lat: ${center.latitude}, lng: ${center.longitude}');
|
||
|
|
},
|
||
|
|
),
|
||
|
|
ListTile(
|
||
|
|
title: Center(child: Text('监听地图移动')),
|
||
|
|
onTap: () {
|
||
|
|
_controller.setMapMoveListener(
|
||
|
|
onMapMoveStart: (move) async => toast('开始移动: $move'),
|
||
|
|
onMapMoveEnd: (move) async => toast('结束移动: $move'),
|
||
|
|
);
|
||
|
|
},
|
||
|
|
),
|
||
|
|
ListTile(
|
||
|
|
title: Center(child: Text('添加点击地图监听')),
|
||
|
|
onTap: () {
|
||
|
|
_controller.setMapClickedListener(
|
||
|
|
(latLng) async {
|
||
|
|
toast(
|
||
|
|
'点击: lat: ${latLng.latitude}, lng: ${latLng.longitude}',
|
||
|
|
);
|
||
|
|
},
|
||
|
|
);
|
||
|
|
},
|
||
|
|
),
|
||
|
|
ListTile(
|
||
|
|
title: Center(child: Text('自定义地图')),
|
||
|
|
onTap: () {
|
||
|
|
_controller.setCustomMapStyle(
|
||
|
|
styleDataPath: 'raw/style.data',
|
||
|
|
styleExtraPath: 'raw/style_extra.data',
|
||
|
|
);
|
||
|
|
},
|
||
|
|
),
|
||
|
|
ListTile(
|
||
|
|
title: Center(child: Text('经纬度坐标转屏幕坐标')),
|
||
|
|
onTap: () async {
|
||
|
|
final centerLatLng =
|
||
|
|
await _controller.getCenterCoordinate();
|
||
|
|
final screenPoint =
|
||
|
|
await _controller.toScreenLocation(centerLatLng);
|
||
|
|
toast('地图中心点对应的屏幕坐标为: $screenPoint');
|
||
|
|
},
|
||
|
|
),
|
||
|
|
ListTile(
|
||
|
|
title: Center(child: Text('屏幕坐标转经纬度坐标')),
|
||
|
|
onTap: () async {
|
||
|
|
final screenPoint = Point(250, 250);
|
||
|
|
final latLng =
|
||
|
|
await _controller.fromScreenLocation(screenPoint);
|
||
|
|
toast('屏幕坐标(250, 250)对应的经纬度坐标为: $latLng');
|
||
|
|
},
|
||
|
|
),
|
||
|
|
ListTile(
|
||
|
|
title: Center(child: Text('设置以地图为中心进行缩放')),
|
||
|
|
onTap: () async {
|
||
|
|
await _controller.setZoomByCenter(true);
|
||
|
|
},
|
||
|
|
),
|
||
|
|
ListTile(
|
||
|
|
title: Center(child: Text('限制地图显示范围')),
|
||
|
|
onTap: () async {
|
||
|
|
final southWest = LatLng(40, 116);
|
||
|
|
final northEast = LatLng(42, 118);
|
||
|
|
await _controller.setMapRegionLimits(southWest, northEast);
|
||
|
|
},
|
||
|
|
),
|
||
|
|
ListTile(
|
||
|
|
title: Center(child: Text('获取当前缩放等级')),
|
||
|
|
onTap: () async {
|
||
|
|
toast('当前缩放等级: ${await _controller.getZoomLevel()}');
|
||
|
|
},
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|