以下是示例代码,您可以根据需要进行更改:
我使用这 3 个包:
-
flutter_map
-
地理编码
-
latlong2
样本结果
示例代码
-
应用程序加载时,它会显示地图标记
-
单击每个标记以显示其标签
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:geojson/geojson.dart';
import 'package:latlong2/latlong.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter App!!',
theme: ThemeData(
colorSchemeSeed: Colors.indigo,
useMaterial3: true,
brightness: Brightness.light,
),
darkTheme: ThemeData(
colorSchemeSeed: Colors.blue,
useMaterial3: true,
brightness: Brightness.dark,
),
home: const MyHomePage(title: 'Flutter Example App'),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}): super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<GeoJsonFeature<dynamic>>? data;
@override
void initState() {
WidgetsBinding.instance.addPostFrameCallback((_) {
loadGeoJsonFeatureFromGeoJson().whenComplete(() {
setState(() {
print('Completed');
});
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
List<Polyline> _polylines = [];
List<Marker> _markers = [];
if (data != null) {
data!.forEach((data) {
if (data.type == GeoJsonFeatureType.line) {
GeoJsonLine line = data.geometry;
final poly = Polyline(points: line.geoSerie!.toLatLng(), color: Colors.blue, strokeWidth: 5);
_polylines.add(poly);
// lines.add(data.geometry);
} else if (data.type == GeoJsonFeatureType.point) {
GeoJsonPoint point = data.geometry;
final marker = Marker(
point: point.geoPoint.toLatLng()!,
width: 20,
height: 20,
builder: (context) => Tooltip(
message: data.properties?['STATIONNAME'] ?? '',
triggerMode: TooltipTriggerMode.tap,
child: Container(
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.circular(99),
),
),
),
);
_markers.add(marker);
}
// Add more features
});
}
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: FlutterMap(
options: MapOptions(
center: LatLng(38.897283, -77.021918),
zoom: 12,
),
children: [
TileLayer(
urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
subdomains: const <String>['a', 'b', 'c',],
),
MarkerLayer(markers: _markers),
// PolylineLayer(polylines: _polylines),
],
),
),
);
}
Future<List<GeoJsonFeature>?> loadGeoJsonFeatureFromGeoJson() async {
try {
String geoJsonBikeLocation = '''
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"OBJECTID": 1,
"LOCATIONID": 3,
"STATIONNAME": "Foggy Bottom",
"BIKECOUNT": 9,
"ADDRESS": "23rd St & I St",
"QUADRANT": "NW",
"WEB_URL": "https://www.smartbikedc.com/",
"PHONE": "1-800-899-4449"
},
"geometry": {
"type": "Point",
"coordinates": [
-77.05012628095922,
38.901405158996035
]
}
},
{
"type": "Feature",
"properties": {
"OBJECTID": 2,
"LOCATIONID": 1,
"STATIONNAME": "Dupont Circle",
"BIKECOUNT": 15,
"ADDRESS": "Massachusetts Ave & Dupont Cir",
"QUADRANT": "NW",
"WEB_URL": "https://www.smartbikedc.com/",
"PHONE": "1-800-899-4449"
},
"geometry": {
"type": "Point",
"coordinates": [
-77.04434905357506,
38.91018149756077
]
}
},
{
"type": "Feature",
"properties": {
"OBJECTID": 3,
"LOCATIONID": 4,
"STATIONNAME": "Gallery Place",
"BIKECOUNT": 15,
"ADDRESS": "7th St & F St",
"QUADRANT": "NW",
"WEB_URL": "https://www.smartbikedc.com/",
"PHONE": "1-800-899-4449"
},
"geometry": {
"type": "Point",
"coordinates": [
-77.02191815762689,
38.89728344626466
]
}
},
{
"type": "Feature",
"properties": {
"OBJECTID": 4,
"LOCATIONID": 7,
"STATIONNAME": "McPherson Square",
"BIKECOUNT": 8,
"ADDRESS": "14th St & H St",
"QUADRANT": "NW",
"WEB_URL": "https://www.smartbikedc.com/",
"PHONE": "1-800-899-4449"
},
"geometry": {
"type": "Point",
"coordinates": [
-77.03240717405485,
38.90078499892696
]
}
},
{
"type": "Feature",
"properties": {
"OBJECTID": 5,
"LOCATIONID": 9,
"STATIONNAME": "Reeves Center",
"BIKECOUNT": 12,
"ADDRESS": "14th St & U St",
"QUADRANT": "NW",
"WEB_URL": "https://www.smartbikedc.com/",
"PHONE": "1-800-899-4449"
},
"geometry": {
"type": "Point",
"coordinates": [
-77.03248214713554,
38.917373230883015
]
}
},
{
"type": "Feature",
"properties": {
"OBJECTID": 6,
"LOCATIONID": 10,
"STATIONNAME": "Shaw",
"BIKECOUNT": 15,
"ADDRESS": "7th St & T St",
"QUADRANT": "NW",
"WEB_URL": "https://www.smartbikedc.com/",
"PHONE": "1-800-899-4449"
},
"geometry": {
"type": "Point",
"coordinates": [
-77.02191245663357,
38.91598834308168
]
}
},
{
"type": "Feature",
"properties": {
"OBJECTID": 7,
"LOCATIONID": 8,
"STATIONNAME": "Metro Center",
"BIKECOUNT": 8,
"ADDRESS": "12th St & G St",
"QUADRANT": "NW",
"WEB_URL": "https://www.smartbikedc.com/",
"PHONE": "1-800-899-4449"
},
"geometry": {
"type": "Point",
"coordinates": [
-77.02848392960873,
38.8987482181005
]
}
},
{
"type": "Feature",
"properties": {
"OBJECTID": 8,
"LOCATIONID": 5,
"STATIONNAME": "Judiciary Square",
"BIKECOUNT": 8,
"ADDRESS": "4th St & E St",
"QUADRANT": "NW",
"WEB_URL": "https://www.smartbikedc.com/",
"PHONE": "1-800-899-4449"
},
"geometry": {
"type": "Point",
"coordinates": [
-77.01540042306134,
38.89574098950278
]
}
},
{
"type": "Feature",
"properties": {
"OBJECTID": 9,
"LOCATIONID": 6,
"STATIONNAME": "Logan Circle",
"BIKECOUNT": 12,
"ADDRESS": "14th St & Rhode Island Ave",
"QUADRANT": "NW",
"WEB_URL": "https://www.smartbikedc.com/",
"PHONE": "1-800-899-4449"
},
"geometry": {
"type": "Point",
"coordinates": [
-77.03219558571061,
38.90855656831227
]
}
},
{
"type": "Feature",
"properties": {
"OBJECTID": 10,
"LOCATIONID": 2,
"STATIONNAME": "Farragut Square",
"BIKECOUNT": 15,
"ADDRESS": "17th St & K St",
"QUADRANT": "NW",
"WEB_URL": "https://www.smartbikedc.com/",
"PHONE": "1-800-899-4449"
},
"geometry": {
"type": "Point",
"coordinates": [
-77.03788324789845,
38.90220976421636
]
}
}
]
}
''';
final geojson = GeoJson();
await geojson.parse(geoJsonBikeLocation);
data = geojson.features;
} catch (e) {
print(e.toString);
rethrow;
}
return data;
}
}