如何解决flutter_polyline_point
的Flutter文档中给出的例子import 'package:Flutter/material.dart';
import 'package:google_maps_Flutter/google_maps_Flutter.dart';
import 'package:Flutter_polyline_points/Flutter_polyline_points.dart';
import 'Constants.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'polyline example',theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "Flutter run". You'll see the
// application has a blue toolbar. Then,without quitting the app,try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "Flutter run",// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.orange,),home: MapScreen(),);
}
}
class MapScreen extends StatefulWidget {
@override
_MapScreenState createState() => _MapScreenState();
}
class _MapScreenState extends State<MapScreen> {
GoogleMapController mapController;
double _originLatitude = 6.5212402,_originLongitude = 3.3679965;
double _destLatitude = 6.849660,_destLongitude = 3.648190;
Map<MarkerId,Marker> markers = {};
Map<polylineId,polyline> polylines = {};
List<LatLng> polylineCoordinates = [];
polylinePoints polylinePoints = polylinePoints();
String googleAPiKey = Constants.MAP_API_KEY;
@override
void initState() {
super.initState();
/// origin marker
_addMarker(LatLng(_originLatitude,_originLongitude),"origin",BitmapDescriptor.defaultMarker);
/// destination marker
_addMarker(LatLng(_destLatitude,_destLongitude),"destination",BitmapDescriptor.defaultMarkerWithHue(90));
_getpolyline();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(_originLatitude,zoom: 15),myLocationEnabled: true,tiltGesturesEnabled: true,compassEnabled: true,scrollGesturesEnabled: true,zoomGesturesEnabled: true,onMapCreated: _onMapCreated,markers: Set<Marker>.of(markers.values),polylines: Set<polyline>.of(polylines.values),)),);
}
void _onMapCreated(GoogleMapController controller) async {
mapController = controller;
}
_addMarker(LatLng position,String id,BitmapDescriptor descriptor) {
MarkerId markerId = MarkerId(id);
Marker marker =
Marker(markerId: markerId,icon: descriptor,position: position);
markers[markerId] = marker;
}
_addpolyLine() {
polylineId id = polylineId("poly");
polyline polyline = polyline(
polylineId: id,color: Colors.red,points: polylineCoordinates);
polylines[id] = polyline;
setState(() {});
}
_getpolyline() async {
polylineResult result = await polylinePoints.getRouteBetweenCoordinates(
Constants.API_KEY,PointLatLng(_originLatitude,PointLatLng(_destLatitude,travelMode: TravelMode.driving,wayPoints: [polylineWayPoint(location: "Sabo,Yaba Lagos Nigeria")]
);
if (result.points.isNotEmpty) {
result.points.forEach((PointLatLng point) {
polylineCoordinates.add(LatLng(point.latitude,point.longitude));
});
}
_addpolyLine();
}
}
API_KEY 和 MAP_API_KEY 之间有什么区别?尝试执行示例时出现错误。
我的要求是获取谷歌地图中两个地方之间的折线点。 请给我一些例子来绘制折线;如果你有。我在绘制路线时遇到问题。尝试了很多例子,但没有得到它。
解决方法
要使用谷歌地图,您需要从以下链接获取 API 密钥:
https://developers.google.com/maps/documentation/javascript/get-api-key
这应该是 MAP_API_KEY
常量。
要使用方向 API,您需要从以下链接获取 API 密钥:
https://developers.google.com/maps/documentation/directions/get-api-key
这应该是 API_KEY
常量。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。