Flutter地图展示与交互插件sphere_maps_flutter的使用
Flutter 地图展示与交互插件 sphere_maps_flutter 的使用
开始使用
在你的 Flutter 项目中添加依赖：
dependencies:
...
sphere_maps_flutter: ^1.2.0
对于 Flutter 初学者，可以参考在线文档进行入门学习。
使用示例
首先导入 sphere_maps_flutter 包：
import 'package:sphere_maps_flutter/sphere_maps_flutter.dart';
接下来是一个完整的示例代码，展示了如何使用 sphere_maps_flutter 插件来创建一个带有图层、标记和几何图形的地图应用。
示例代码
import 'package:flutter/material.dart';
import 'package:sphere_maps_flutter/sphere_maps_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
[@override](/user/override)
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final map = GlobalKey<SphereMapState>();
final GlobalKey<ScaffoldMessengerState> messenger = GlobalKey<ScaffoldMessengerState>();
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
scaffoldMessengerKey: messenger,
home: Scaffold(
body: Column(
children: [
Expanded(
flex: 2,
child: SphereMapWidget(
key: map,
apiKey: "", // 请替换为你的 API Key
bundleId: "", // 请替换为你的 Bundle ID
eventName: [
JavascriptChannel(
name: "Ready",
onMessageReceived: (msg) => {debugPrint(msg.message)})
],
options: {
"layer": Sphere.SphereStatic("Layers", "HYBRID"),
"zoom": 7,
"zoomRange": {
"min": 5,
"max": 10,
},
"location": {
"lon": 101.2,
"lat": 12.8,
},
"ui": Sphere.SphereStatic("UiComponent", "None"),
"lastView": true,
},
),
),
Expanded(
child: Padding(
padding: EdgeInsets.all(8.0),
child: ListView(
children: [
Text(
"Layer",
style: Theme.of(context).textTheme.headline6,
),
Row(
children: [
OutlinedButton(
onPressed: () {
var layer = Sphere.SphereObject(
"Layer",
args: [
"roadnet2:Road_FGDS",
{
"type": Sphere.SphereStatic(
"LayerType",
"WMS",
),
"url":
'https://apix.longdo.com/vector/test-tile.php',
"zoomRange": {
"min": 1,
"max": 9,
},
"refresh": 180,
"opacity": 0.5,
"weight": 10,
"bound": {
"minLon": 100,
"minLat": 10,
"maxLon": 105,
"maxLat": 20
}
}
],
);
if (layer != null) {
map.currentState?.call("Layers.add", args: [layer]);
}
},
child: Text("WMS"),
),
SizedBox(width: 8),
OutlinedButton(
onPressed: () {
var layer = Sphere.SphereObject(
"Layer",
args: [
"roadnet2:Road_FGDS@EPSG:900913@png",
{
"type": Sphere.SphereStatic(
"LayerType",
"TMS",
),
"url":
"https://apix.longdo.com/vector/test-tile.php?tms=",
"zoomOffset": 0,
}
],
);
if (layer != null) {
map.currentState?.call("Layers.add", args: [layer]);
}
},
child: Text("TMS"),
),
SizedBox(width: 8),
OutlinedButton(
onPressed: () {
var layer = Sphere.SphereObject(
"Layer",
args: [
"roadnet2:Road_FGDS",
{
"type": Sphere.SphereStatic(
"LayerType",
"WMTS",
),
"url":
"https://apix.longdo.com/vector/test-tile.php",
"srs": "EPSG:900913",
"tileMatrix": "(z) => 'EPSG:900913:' + z",
}
],
);
if (layer != null) {
map.currentState?.call("Layers.add", args: [layer]);
}
},
child: Text("WMTS"),
),
SizedBox(width: 8),
OutlinedButton(
onPressed: () {
var layer = Sphere.SphereObject(
"Layer",
args: [
"bluemarble_terrain",
{
"type": Sphere.SphereStatic(
"LayerType",
"WMTS_REST",
),
"url": "https://ms.longdo.com/mapproxy/wmts",
"srs": "GLOBAL_WEBMERCATOR",
}
],
);
if (layer != null) {
map.currentState?.call("Layers.add", args: [layer]);
}
},
child: Text("WMTS REST"),
),
],
),
Text(
"Marker",
style: Theme.of(context).textTheme.headline6,
),
Row(
children: [
OutlinedButton(
onPressed: () {
var marker = Sphere.SphereObject(
"Marker",
args: [
{
"lon": 100.56,
"lat": 13.74,
}
],
);
if (marker != null) {
map.currentState?.call("Overlays.add", args: [marker]);
}
},
child: Text("Add"),
),
SizedBox(width: 8),
OutlinedButton(
onPressed: () {
var marker = Sphere.SphereObject(
"Marker",
args: [
{
"lon": 100.56,
"lat": 13.74,
}
],
);
if (marker != null) {
map.currentState?.call("Overlays.remove", args: [marker]);
}
},
child: Text("Remove"),
),
SizedBox(width: 8),
OutlinedButton(
onPressed: () {
map.currentState?.call("Overlays.clear");
},
child: Text("Clear"),
),
],
),
Row(
children: [
OutlinedButton(
onPressed: () {
var marker = Sphere.SphereObject(
"Marker",
args: [
{
"lon": 101.2,
"lat": 12.8,
},
{
"title": "Marker",
"detail": "Drag me",
"visibleRange": {
"min": 7,
"max": 9,
},
"draggable": true
}
],
);
if (marker != null) {
map.currentState?.call("Overlays.add", args: [marker]);
}
},
child: Text("Option 1"),
),
SizedBox(width: 8),
OutlinedButton(
onPressed: () {
var marker = Sphere.SphereObject(
"Marker",
args: [
{
"lon": 99.35,
"lat": 14.25,
},
{
"title": "Custom Marker",
"icon": {
"html": "Marker",
"offset": {
"x": 18,
"y": 21,
}
},
"popup": {"html": "<div>popup</div>"}
}
],
);
if (marker != null) {
map.currentState?.call("Overlays.add", args: [marker]);
}
},
child: Text("Option 2"),
),
SizedBox(width: 8),
OutlinedButton(
onPressed: () {
var marker = Sphere.SphereObject(
"Marker",
args: [
{
"lon": 100.41,
"lat": 13.84,
},
{
"title": "Rotate Marker",
"rotate": 90,
}
],
);
if (marker != null) {
map.currentState?.call("Overlays.add", args: [marker]);
}
},
child: Text("Option 3"),
),
SizedBox(width: 8),
OutlinedButton(
onPressed: () {
var marker = Sphere.SphereObject(
"Marker",
args: [
{
"type": "Feature",
"properties": [],
"geometry": {
"type": "Point",
"coordinates": [
100.49477577209473,
13.752891404314328,
]
},
}
],
);
if (marker != null) {
map.currentState?.call("Overlays.add", args: [marker]);
}
},
child: Text("GeoJson"),
),
],
),
Text(
"Geometry",
style: Theme.of(context).textTheme.headline6,
),
Row(
children: [
OutlinedButton(
onPressed: () {
var polyline = Sphere.SphereObject(
"Polyline",
args: [
[
{
"lon": 100,
"lat": 14,
},
{
"lon": 101,
"lat": 15,
},
{
"lon": 102,
"lat": 14,
},
],
{
"title": "Polyline",
"detail": "-",
"label": "Polyline",
"lineWidth": 4,
"lineColor": "rgba(255, 0, 0, 0.8)"
}
],
);
if (polyline != null) {
map.currentState?.call("Overlays.add", args: [polyline]);
}
},
child: Text("Polyline"),
),
SizedBox(width: 8),
OutlinedButton(
onPressed: () {
var dashline = Sphere.SphereObject(
"Polyline",
args: [
[
{
"lon": 99,
"lat": 14,
},
{
"lon": 100,
"lat": 15,
},
{
"lon": 101,
"lat": 14,
}
],
{
"title": "Dashline",
"detail": "-",
"label": "Dashline",
"lineWidth": 4,
"lineColor": "rgba(255, 0, 0, 0.8)",
"lineStyle": Sphere.SphereStatic(
"LineStyle",
"Dashed",
),
"pointer": true
}
],
);
if (dashline != null) {
map.currentState?.call("Overlays.add", args: [dashline]);
}
},
child: Text("Dashline"),
),
SizedBox(width: 8),
OutlinedButton(
onPressed: () {
var polygon = Sphere.SphereObject(
"Polygon",
args: [
[
{
"lon": 99,
"lat": 14,
},
{
"lon": 100,
"lat": 13,
},
{
"lon": 102,
"lat": 13,
},
{
"lon": 103,
"lat": 14,
}
],
{
"title": "Polygon",
"detail": "-",
"label": "Polygon",
"lineWidth": 2,
"lineColor": "rgba(0, 0, 0, 1)",
"fillColor": "rgba(255, 0, 0, 0.4)",
"visibleRange": {
"min": 5,
"max": 18,
},
"editable": true,
"weight": Sphere.SphereStatic(
"OverlayWeight",
"Top",
)
}
],
);
if (polygon != null) {
map.currentState?.call("Overlays.add", args: [polygon]);
}
},
child: Text("Polygon"),
),
SizedBox(width: 8),
OutlinedButton(
onPressed: () {
var circle = Sphere.SphereObject(
"Circle",
args: [
{
"lon": 101,
"lat": 15,
},
1,
{
"title": "Geom 3",
"detail": "-",
"lineWidth": 2,
"lineColor": "rgba(255, 0, 0, 0.8)",
"fillColor": "rgba(255, 0, 0, 0.4)",
}
],
);
if (circle != null) {
map.currentState?.call("Overlays.add", args: [circle]);
}
},
child: Text("Circle"),
),
],
),
Row(
children: [
OutlinedButton(
onPressed: () {
var dot = Sphere.SphereObject(
"Dot",
args: [
{
"lon": 100.540574,
"lat": 13.714765,
},
{
"lineWidth": 20,
"draggable": true,
}
],
);
if (dot != null) {
map.currentState?.call("Overlays.add", args: [dot]);
}
},
child: Text("Dot"),
),
SizedBox(width: 8),
OutlinedButton(
onPressed: () {
var donut = Sphere.SphereObject(
"Polygon",
args: [
[
{
"lon": 101,
"lat": 15,
},
{
"lon": 105,
"lat": 15,
},
{
"lon": 103,
"lat": 12,
},
null,
{
"lon": 103,
"lat": 14.9,
},
{
"lon": 102.1,
"lat": 13.5,
},
{
"lon": 103.9,
"lat": 13.5,
}
],
{
"lon": 100.540574,
"lat": 13.714765,
},
{
"label": true,
"clickable": true,
}
],
);
if (donut != null) {
map.currentState?.call("Overlays.add", args: [donut]);
}
},
child: Text("Donut"),
),
SizedBox(width: 8),
OutlinedButton(
onPressed: () {
var rectangle = Sphere.SphereObject(
"Rectangle",
args: [
{
"lon": 100.617,
"lat": 13.896,
},
{
"width": 2,
"height": 1,
},
{
"editable": true,
}
],
);
if (rectangle != null) {
map.currentState?.call("Overlays.add", args: [rectangle]);
}
},
child: Text("Rectangle"),
),
],
),
Row(
children: [
OutlinedButton(
onPressed: () async {
var polygon = Sphere.SphereObject(
"Polygon",
args: [
[
{
"lon": 99,
"lat": 14,
},
{
"lon": 100,
"lat": 13,
},
{
"lon": 102,
"lat": 13,
},
{
"lon": 103,
"lat": 14,
}
]
],
);
if (polygon != null) {
var result = await map.currentState?.objectCall(
polygon,
"size",
);
print(result);
}
},
child: Text("Geometry Area"),
),
SizedBox(width: 8),
OutlinedButton(
onPressed: () async {
var polyline = Sphere.SphereObject(
"Polyline",
args: [
[
{
"lon": 100,
"lat": 14,
},
{
"lon": 101,
"lat": 15,
},
{
"lon": 102,
"lat": 14,
}
],
{
"title": "Polyline",
"detail": '-',
"label": "Polyline",
"lineWidth": 4,
"lineColor": "rgba(255, 0, 0, 0.8)"
}
],
);
if (polyline != null) {
var result = await map.currentState?.objectCall(
polyline,
"size",
args: [
"th",
],
);
print(result);
}
},
child: Text("Format Distance Polyline"),
),
],
),
],
),
))
],
),
),
);
}
}
更多关于Flutter地图展示与交互插件sphere_maps_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter地图展示与交互插件sphere_maps_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter项目中使用sphere_maps_flutter插件来展示和交互地图的代码案例。sphere_maps_flutter是一个用于在Flutter应用中展示地图并提供交互功能的插件。以下是一个基本的示例，展示了如何集成和使用该插件。
1. 添加依赖
首先，在你的pubspec.yaml文件中添加sphere_maps_flutter的依赖：
dependencies:
flutter:
sdk: flutter
sphere_maps_flutter: ^最新版本号 # 请替换为实际可用的最新版本号
然后运行flutter pub get来安装依赖。
2. 配置Android权限
由于地图功能通常需要访问设备的定位权限，你需要在AndroidManifest.xml中添加必要的权限：
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.yourapp">
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<!-- 其他配置 -->
</manifest>
3. 初始化地图
在你的main.dart文件中，导入sphere_maps_flutter并初始化地图：
import 'package:flutter/material.dart';
import 'package:sphere_maps_flutter/sphere_maps_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Map Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MapScreen(),
);
}
}
class MapScreen extends StatefulWidget {
@override
_MapScreenState createState() => _MapScreenState();
}
class _MapScreenState extends State<MapScreen> {
SphereMapController? _mapController;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Map'),
),
body: SphereMap(
apiKey: '你的API密钥', // 替换为你的实际API密钥
onMapCreated: (SphereMapController controller) {
_mapController = controller;
// 初始化地图位置
_mapController?.moveCamera(CameraUpdateFactory.newLatLngZoom(
LatLng(纬度, 经度), // 替换为实际的经纬度
15.0,
));
},
options: SphereMapOptions(
mapType: SphereMapType.normal,
),
myLocationEnabled: true,
myLocationButtonEnabled: true,
zoomGesturesEnabled: true,
scrollGesturesEnabled: true,
rotateGesturesEnabled: true,
tiltGesturesEnabled: true,
),
floatingActionButton: FloatingActionButton(
onPressed: () {
if (_mapController != null) {
// 示例：获取当前地图中心位置
_mapController?.getCenterLocation().then((LatLng location) {
print('当前地图中心位置: ${location.latitude}, ${location.longitude}');
});
}
},
tooltip: '获取当前位置',
child: Icon(Icons.location_on),
),
);
}
}
4. 注意事项
- API密钥：确保你已经从地图服务提供商（如高德地图、百度地图等）获取了有效的API密钥，并将其替换到代码中的
apiKey字段。 - 权限处理：在Android和iOS上，你可能需要额外处理运行时权限请求。对于Flutter，可以使用
permission_handler等插件来管理权限。 - 调试和测试：在实际设备上进行调试和测试，以确保地图功能正常工作。
通过上述步骤，你应该能够在Flutter应用中成功集成并使用sphere_maps_flutter插件来展示和交互地图。如果需要更多高级功能，请参考sphere_maps_flutter的官方文档和示例。
