flutter最详细的根据百度地图SDK发送仿微信的发送定位功能,其中包含地图拖动位置选择,选择位置信息,发送之后再根据腾讯IM的即时通讯以信息的方式展示出来,请你用最详细的flutter实现出来
时间: 2024-04-29 08:21:24 浏览: 362
Flutter地图插件支持Android,iOS 百度、高德地图导航
好的,下面是实现步骤。
1. 引入百度地图SDK和腾讯IM SDK
在pubspec.yaml文件中引入以下依赖:
```yaml
dependencies:
flutter:
sdk: flutter
baidu_map_base: ^0.8.4
tencent_im_sdk_plugin: ^2.11.1
```
2. 初始化百度地图SDK
在main.dart文件中引入百度地图SDK并初始化:
```dart
import 'package:baidu_map_base/baidu_map_base.dart' show BMFMapSDK, BMF_COORD_TYPE;
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_bmflocation/flutter_baidu_location.dart' show BMFLocation, BMFLocationManager;
import 'package:flutter_bmflocation/flutter_baidu_location_android_option.dart' show BMFLocationAndroidOption;
import 'package:flutter_bmfmap/BaiduMap/bmfmap_map.dart' show BMFMapOptions;
import 'package:flutter_bmfmap/BaiduMap/bmfmap_view.dart' show BMFMapType;
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await BMFMapSDK.init('your baidu map ak');
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
BMFMapController _mapController;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
BMFMapView(
onBMFMapCreated: (controller) {
_mapController = controller;
_mapController.setMapOptions(BMFMapOptions(
center: BMFCoordinate(39.916, 116.404),
zoomLevel: 12,
mapType: BMFMapType.Standard,
));
},
),
],
),
);
}
}
```
其中,`BMFMapSDK.init('your baidu map ak')`用于初始化百度地图SDK,需要传入你自己的百度地图AK。`BMFMapView`是用于展示地图的Widget,`BMFMapController`是地图控制器,可以通过它来控制地图的行为,比如设置地图中心点、缩放级别等。
3. 获取当前位置
在用户点击发送位置按钮之前,需要先获取用户当前的位置。百度地图SDK提供了定位功能,我们可以使用它来获取当前位置。
```dart
Future<BMFLocation> getLocation() async {
BMFLocationAndroidOption androidOption = BMFLocationAndroidOption();
androidOption.isOpenGps = true;
androidOption.isLocationNotify = true;
androidOption.locationMode = BMFLocationMode.Hight_Accuracy;
androidOption.coorType = BMF_COORD_TYPE.BD09LL;
androidOption.isNeedAltitude = true;
androidOption.isNeedAddress = true;
androidOption.isNeedLocationPoiList = true;
BMFLocationManager locationManager = BMFLocationManager();
locationManager.init();
await locationManager.startLocation(androidOption);
BMFLocation location = await locationManager.getLocation(timeout: 5000);
locationManager.stopLocation();
locationManager.destroy();
return location;
}
```
在上面的代码中,我们使用`BMFLocationAndroidOption`来设置定位参数,然后创建`BMFLocationManager`来进行定位。调用`startLocation`方法开始定位,定位结果将在`getLocation`方法中返回。需要注意的是,定位需要一定的时间,因此可以设置一个超时时间,如果超时则返回null。
4. 在地图上标记当前位置
获取到用户当前位置后,需要在地图上标记出来:
```dart
BMFLocation location = await getLocation();
if (location != null) {
_mapController?.setCenterCoordinate(BMFCoordinate(location.latitude, location.longitude));
BMFMarker marker = BMFMarker(
position: BMFCoordinate(location.latitude, location.longitude),
title: '我的位置',
subtitle: location.address,
icon: 'assets/images/my_location.png',
);
_mapController?.addMarker(marker);
}
```
在上面的代码中,我们先将地图中心点设置为用户当前位置,然后创建一个`BMFMarker`,用于在地图上标记出用户当前位置。需要注意的是,这里我们使用了一个本地图片作为标记的图标。
5. 实现地图拖动选择位置
让用户自己选择位置可以通过地图拖动实现。我们可以监听地图的拖动事件,在拖动结束时获取用户选择的位置:
```dart
BMFCoordinate _selectedCoordinate;
_mapController?.setMapOnDragListener(onDragEnd: (coord) {
_selectedCoordinate = coord;
BMFReverseGeoCodeSearchOption option = BMFReverseGeoCodeSearchOption(
reverseGeoPoint: coord,
);
BMFSearchManager().reverseGeoCode(option).then((result) {
if (result?.address != null) {
setState(() {
_selectedAddress = result.address;
});
}
});
});
```
在上面的代码中,我们使用`setMapOnDragListener`方法来监听地图拖动事件。在拖动结束时,我们获取用户选择的位置,并通过反地理编码将该位置转换为地址。
6. 实现选择位置信息
通过地图拖动选择位置后,需要将选择的位置信息展示出来供用户确认。我们可以使用`showModalBottomSheet`方法来展示一个底部弹出框,供用户选择是否发送该位置信息:
```dart
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
height: 150,
child: Column(
children: [
ListTile(
title: Text('发送位置'),
subtitle: Text(_selectedAddress),
onTap: () {
Navigator.of(context).pop(true);
},
),
Divider(),
ListTile(
title: Text('取消'),
onTap: () {
Navigator.of(context).pop(false);
},
),
],
),
);
},
).then((value) {
if (value == true) {
_sendMessage(_selectedCoordinate, _selectedAddress);
}
});
```
在上面的代码中,我们展示了一个底部弹出框,提供了发送位置和取消两个选项。用户点击发送位置后,我们调用`_sendMessage`方法将位置信息发送出去。
7. 发送位置信息
使用腾讯IM SDK发送位置信息需要先设置自定义消息:
```dart
TencentImSDKPlugin.v2TIMManager.getMessageManager().setCustomConfig(
CustomMessage(
dataEncodeType: V2TIMMessageDataEncodeType.V2TIM_DATA_ENCODE_TYPE_JSON,
dataType: MessageType.Location,
description: '位置信息',
),
);
```
上面的代码中,我们设置了一个名为`MessageType.Location`的自定义消息类型,表示这是一个位置信息类型的消息。
发送位置信息的实现代码如下:
```dart
void _sendMessage(BMFCoordinate coordinate, String address) {
if (coordinate == null || address == null) {
return;
}
V2TIMMessage message = V2TIMManager.getMessageManager().createCustomMessage(
data: jsonEncode({
'latitude': coordinate.latitude,
'longitude': coordinate.longitude,
'address': address,
}),
priority: V2TIMMessagePriority.V2TIM_PRIORITY_NORMAL,
customInt: MessageType.Location,
sender: V2TIMManager.getInstance().getLoginUser(),
);
V2TIMManager.getMessageManager().sendMessage(
conversationID: 'your conversation id',
receiver: 'your friend id',
onlineUserOnly: false,
message: message,
sendMsgTimeout: 30,
groupID: '',
priority: V2TIMMessagePriority.V2TIM_PRIORITY_NORMAL,
progress: (progress, sended, total) {},
);
}
```
在上面的代码中,我们将位置信息封装成了一个JSON字符串,并创建了一个自定义消息对象。然后,我们调用`V2TIMManager.getMessageManager().sendMessage`方法将消息发送出去。需要注意的是,这里需要传入会话ID和接收者ID等参数,根据具体情况修改。
至此,我们就完成了根据百度地图SDK发送仿微信的发送定位功能,并根据腾讯IM的即时通讯以信息的方式展示出来的实现。完整代码如下:
阅读全文