如何在Flutter中使用Google Maps设置活动标记？

Question

我在我的Flutter应用中有一个GoogleMap。 当页面加载时，它会调用API并获取一系列的地理位置，并用此创建标记列表。

我的GoogleMap使用这个标记列表，它们显示得很好，但是我想让其中一个标记处于活动状态。 我在API文档中找不到任何可以实现这一点的内容。我该如何实现？

- DrLazer

---

什么是活动标记？ - Abhay Koradiya

当您单击市场时，它会显示信息，并成为活动标记。我无法仅通过代码实现这一点。 - DrLazer

Answer 1

使用GoogleMapController设置标记活动状态，这里的allMarkers是一个标记列表，可能来自数据库，执行后第一个（索引0）将变为活动状态：

_googleMapController.showMarkerInfoWindow(allMarkers[0].markerId);

文档

- Seahlolo Makofane

Answer 2

你可以通过onTap事件处理程序实现自定义活动状态。 在有状态的小部件中，创建一个状态来跟踪选定的标记，并通过比较它们的ID与突出显示的标记来重建所有标记：

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class GoogleMapsLabPage extends StatefulWidget {
  @override
  State<GoogleMapsLabPage> createState() => GoogleMapsLabPageState();
}

class GoogleMapsLabPageState extends State<GoogleMapsLabPage> {
  final preset = [
    {"id": "mountain-view", "lat": 37.421512, "lng": -122.084101},
    {"id": "san-bruno", "lat": 37.62816, "lng": -122.426491},
    {"id": "san-francisco", "lat": 37.789972, "lng": -122.390013},
    {"id": "sunnyvale", "lat": 37.403694, "lng": -122.031583}
  ];

  String _selectedOffice = '';

  List<Marker> _buildMarkers() {
    return preset.map((office) {
      return Marker(
          markerId: MarkerId(office['id']),
          position: LatLng(office['lat'], office['lng']),
          icon: office['id'] == _selectedOffice
              ? BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue)
              : BitmapDescriptor.defaultMarker,
          consumeTapEvents: true,
          onTap: () {
            setState(() {
              _selectedOffice = office['id'];
            });
          });
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GoogleMap(
        initialCameraPosition: CameraPosition(target: LatLng(37.7, -122.2), zoom: 9.0),
        markers: _buildMarkers().toSet(),
      ),
    );
  }
}

通过将consumeTapEvents参数设置为true，我们可以禁用默认的点击处理方式，从而使地图居中于标记并显示其信息窗口。

- Spatz

Answer 3

Flutter中存在与同一问题相关的持续问题这里和这里。

目前，官方地图SDK无法实现此功能。

然而，由于社区的贡献，有另一个分支项目可以帮助您实现此目标。请查看这个。

- Anirudh Bagri

Answer 4

   mapController.addMarker(
  MarkerOptions(
    position: LatLng(your values here),
  ),
);

- nordine enn

---

最好解释一下你的代码片段在做什么，以及为什么这是作为回答 OP 问题的答案。 - CEH