Flutter开发中如何控制Google Map标记（marker）的透明度

Google Maps各平台官方API都提供了原生的透明度控制能力，不需要自定义渲染即可实现按位置筛选修改部分marker透明度的需求，各端实现方式如下：

• 网页端（JavaScript API）
  初始化marker时直接配置opacity参数，取值范围为0~1，0为完全透明，1为完全不透明：

  const marker = new google.maps.Marker({
    position: yourLatLng,
    map: yourMapInstance,
    opacity: 0.5 // 初始设置为50%透明度
  });
  

  已创建的marker可通过setOpacity方法动态修改透明度，适合按位置筛选后批量调整的场景：

  // 遍历所有marker，符合位置条件的改为30%透明度，其余保持完全不透明
  allMarkers.forEach(marker => {
    const position = marker.getPosition();
    if (/* 在这里写你的位置判断逻辑 */) {
      marker.setOpacity(0.3);
    } else {
      marker.setOpacity(1);
    }
  })
  

• Android端
  初始化时通过alpha方法配置透明度：

  val marker = googleMap.addMarker(
    MarkerOptions()
      .position(yourLatLng)
      .alpha(0.5f)
  )
  

  动态修改直接更新alpha属性即可：

  marker?.alpha = if (/* 位置判断条件 */) 0.3f else 1f
  

• iOS端（Swift）
  初始化时配置opacity属性：

  let marker = GMSMarker(position: yourLatLng)
  marker.opacity = 0.5
  marker.map = yourMapView
  

  动态修改直接更新属性即可：

  marker.opacity = /* 位置判断条件 */ ? 0.3 : 1
  

注意：以上透明度配置对默认marker、自定义icon的marker都生效，无需单独调整图标资源本身的透明度。

内容的提问来源于stack exchange，提问作者Aziz Boufath