如何在 HERE Maps (Flutter) 上向地图标记添加弹出窗口

Question

基本代码带有一个元数据弹出窗口，但我不知道如何转换它以在弹出窗口中显示来自 API 调用的数据，这些数据与单个地图标记相关，所有这些都通过已经有不同的 API 调用。

Map Marker API 调用在 Json 反馈中包含一个 ID，我需要获取该 ID 并在调用的 URL 中调用一个单独的 API，然后在弹出窗口中显示。

我可以通过call 获取数据并显示为列表 - 我只是在努力将其集成到相关标记的弹出窗口中

标记通过 API 调用很好地放置在地图上，但弹出窗口通过代码中的 string 显示库存元数据

我几乎找不到关于将 API 数据放置在 HERE Map 弹出窗口中的文档，该窗口内置于 Flutter for mobile。

此代码将标记添加到地图，底部的元数据功能

Future<void> _addPOIMapMarker(GeoCoordinates geoCoordinates, int drawOrder) async {


    if (_poiMapImage == null) {
      Uint8List imagePixelData = await _loadFileAsUint8List('assets/poi.png');
      _poiMapImage = MapImage.withPixelDataAndImageFormat(imagePixelData, ImageFormat.png);
    }

    Anchor2D anchor2D = Anchor2D.withHorizontalAndVertical(0.5, 1);

    MapMarker mapMarker = MapMarker.withAnchor(geoCoordinates, _poiMapImage, anchor2D);
    mapMarker.drawOrder = drawOrder;

    Metadata metadata = new Metadata();
    metadata.setString("key_poi", "T");
    mapMarker.metadata = metadata;

    _hereMapController.mapScene.addMapMarker(mapMarker);
    _mapMarkerList.add(mapMarker);

  }

Future<void> _addCircleMapMarker(GeoCoordinates geoCoordinates, int drawOrder) async {
   
    if (_circleMapImage == null) {
      Uint8List imagePixelData = await _loadFileAsUint8List('assets/circle.png');
      _circleMapImage = MapImage.withPixelDataAndImageFormat(imagePixelData, ImageFormat.png);
    }

    MapMarker mapMarker = MapMarker(geoCoordinates, _circleMapImage);
    mapMarker.drawOrder = drawOrder;

    _hereMapController.mapScene.addMapMarker(mapMarker);
    _mapMarkerList.add(mapMarker);
  }

Future<Uint8List> _loadFileAsUint8List(String assetPathToFile) async {

    ByteData fileData = await rootBundle.load(assetPathToFile);
    return Uint8List.view(fileData.buffer);
  }

  void _setTapGestureHandler() {
    _hereMapController.gestures.tapListener = TapListener.fromLambdas(lambda_onTap: (Point2D touchPoint) {
      _pickMapMarker(touchPoint);
    });
  }

  void _pickMapMarker(Point2D touchPoint) {
    double radiusInPixel = 2;
    _hereMapController.pickMapItems(touchPoint, radiusInPixel, (pickMapItemsResult) {
     
      List<MapMarker> mapMarkerList = pickMapItemsResult.markers;
      if (mapMarkerList.length == 0) {
        print("No map markers found.");
        return;
      }

      MapMarker topmostMapMarker = mapMarkerList.first;
      Metadata metadata = topmostMapMarker.metadata;
      if (metadata != null) {
        String message = metadata.getString("key_poi") ?? "No message found.";
        _showDialog("ND", message);
        return;
      }

      _showDialog("ND", "No metadata attached.");
    });
  }

在此先感谢

Answer 1

如果您想在特定位置显示不同的内容，您可以考虑使用MapViewPins。

只需使用您想查看的内容创建任何 Flutter Widget：

Widget _createWidget(String label, Color backgroundColor) {
  return Container(
    padding: EdgeInsets.all(10),
    decoration: BoxDecoration(
      color: backgroundColor,
      border: Border.all(color: Colors.black),
    ),
    child: Text(
      label,
      style: TextStyle(fontSize: 20.0),
    ),
  );
}

然后您可以使用 HERE SDK 和一行代码在某个位置显示该小部件：

_hereMapController.pinWidget(
    _createWidget("My label for this location...", Color.fromARGB(150, 0, 194, 138)), GeoCoordinates(52.5309, 13.3946));

相反，MapMarker 对象由静态图像资产组成，因此它们不会显示不同的内容。但是，MapMarker 类也支持 SVG 资源。您可以即时更新 SVG 资源，将其设置为现有的 MapMarker 实例，然后内容将被更新。这只需要您处理基于 XML 的 SVG 格式。一个好处可能是这可能比原生 Flutter 小部件具有更好的性能，...但这取决于您的小部件的复杂程度以及您需要同时显示多少小部件。