绘制点标记 最后更新时间: 2021年01月22日
点标记用来在地图上标记任何位置,例如用户位置、车辆位置、店铺位置等一切带有位置属性的事物。
使用地图Flutter插件,可以通过修改AMapWidget的markers属性,进行点标记的添加。
Marker对象属性说明
名称 | 说明 | 备注 |
---|---|---|
position | 经纬度 | 必填项,不能为空 |
alpha | 透明度 | 可选项,取值范围[0-1.0], 默认值为1.0, 不能为null |
clickable | 是否可以点击 | 可选项,默认值:true |
draggable | 是否允许拖动 | 可选项,默认值:false |
icon | 图标 | 可选项 |
infoWindowEnable | 是否开启infoWindow | 可选项,默认值:true |
infoWindow | InfoWindow对象 | 可选项,用于显示标题和内容的气泡 |
rotation | 旋转角度 | 可选项,默认值:0 |
visible | 是否可见 | 可选项,默认值:true |
zIndex | z轴的值,用于调整多个Maker之间的层级关系 iOS系统的该值仅能在初始化时指定 | 可选项,默认值:0 |
onTap | 点击回调 | |
onDragEnd | 拖动结束回调 |
添加地图时直接绘制Marker
主要用于在创建地图地图时直接添加预设的marker,创建地图和添加Marker一次完成,不需要先创建地图再添加Marker。
示例代码如下:
static final LatLng mapCenter = const LatLng(39.909187, 116.397451);
final Map<String, Marker> _initMarkerMap = <String, Marker>{};
@override
Widget build(BuildContext context) {
for(int i=0; i< 10; i++) {
LatLng position = LatLng(
mapCenter.latitude + sin(i * pi / 12.0) / 20.0,
mapCenter.longitude + cos(i * pi / 12.0) / 20.0);
Marker marker = Marker(position: position);
_initMarkerMap[marker.id] = marker;
}
final AMapWidget amap = AMapWidget(
apiKey: ConstConfig.amapApiKeys,
markers: Set<Marker>.of(_initMarkerMap.values),
);
return Container(
child: amap,
);
}
添加后的效果:
单独添加Marker
Marker也可以在地图初始化完成之后再单独添加, 通过setState方法改变地图的marker属性
关键代码如下:
///添加一个marker
void _addMarker() {
final _markerPosition =
LatLng(_currentLatLng.latitude, _currentLatLng.longitude + 2 / 1000);
final Marker marker = Marker(
position: _markerPosition,
//使用默认hue的方式设置Marker的图标
icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueOrange),
);
//调用setState触发AMapWidget的更新,从而完成marker的添加
setState(() {
_currentLatLng = _markerPosition;
//将新的marker添加到map里
_markers[marker.id] = marker;
});
}
///在State的build里构建AMapWidget
final AMapWidget amap = AMapWidget(
apiKey: ConstConfig.amapApiKeys,
// //创建地图时,给marker属性赋值一个空的set,否则后续无法添加marker
markers: Set<Marker>.of(_markers.values),
);