dart - 如何在 Google Maps Flutter 插件上添加折线?
问题描述
我正在使用官方的Google Maps Flutter 插件来显示地图,它运行良好,但现在我想在地图中显示一条路线,所以我使用这个包为我提供只需要添加Polylines的路线。
解决方案
我使用这个插件 google_maps_flutter 解决了同样的问题:^0.5.19
import 'package:google_maps_flutter/google_maps_flutter.dart';
static const LatLng _center = const LatLng(33.738045, 73.084488);
final Set<Marker> _markers = {};
final Set<Polyline>_polyline={};
//add your lat and lng where you wants to draw polyline
LatLng _lastMapPosition = _center;
List<LatLng> latlng = List();
LatLng _new = LatLng(33.738045, 73.084488);
LatLng _news = LatLng(33.567997728, 72.635997456);
latlng.add(_new);
latlng.add(_news);
//call this method on button click that will draw a polyline and markers
void _onAddMarkerButtonPressed() {
getDistanceTime();
setState(() {
_markers.add(Marker(
// This marker id can be anything that uniquely identifies each marker.
markerId: MarkerId(_lastMapPosition.toString()),
//_lastMapPosition is any coordinate which should be your default
//position when map opens up
position: _lastMapPosition,
infoWindow: InfoWindow(
title: 'Really cool place',
snippet: '5 Star Rating',
),
icon: BitmapDescriptor.defaultMarker,
));
_polyline.add(Polyline(
polylineId: PolylineId(_lastMapPosition.toString()),
visible: true,
//latlng is List<LatLng>
points: latlng,
color: Colors.blue,
));
});
//in your build widget method
GoogleMap(
//that needs a list<Polyline>
polylines:_polyline,
markers: _markers,
onMapCreated: _onMapCreated,
myLocationEnabled:true,
onCameraMove: _onCameraMove,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 11.0,
),
mapType: MapType.normal,
);
}
推荐阅读
- javascript - 为什么我的函数没有按预期显示和隐藏元素?
- reactjs - 嵌套的动态子组件中的自定义方法不会触发 React
- firebase - 对 React 页面的 A/B 测试支持
- javascript - React:如何使用状态变量从另一个组件运行函数
- angularjs - AngularJS - 在承诺之间共享返回值
- python - 有没有办法创建一个源分布,包括。没有 __init__.py 的子包?
- swift4 - Swift 4 上的几个相互依赖的 JSON 请求
- javascript - JavaScript 对象属性复制语法
- javascript - 从 v-for 内部访问多维对象
- ios - 2018:错误 ITMS-90096:“您的二进制文件未针对 iPhone 5 进行优化”