开发 Flutter插件 开发指南 地图Flutter插件 绘制点标记

绘制点标记 最后更新时间: 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),
);


 

返回顶部 示例中心 常见问题 智能客服 公众号
二维码