Блог

Я разрабатываю приложение в Flutter, которое делает снимок карты Google (поэтому у меня есть изображение, доступное для отображения в автономном режиме) и отображает значок местоположения поверх него.

Вместе со снимком карты я фиксирую широту и долготу четырех углов карты. Таким образом, с текущими показаниями GPS я могу определить относительное местоположение на карте, чтобы отобразить значок местоположения.

Проблема в том, что я хочу, чтобы заостренная часть значка была расположена в местоположении GPS. Это означает среднюю точку нижнего края значка.

В настоящее время я использую стек с изображением карты в качестве первого слоя и расположенным сверху значком, расположенным с помощью виджета FractionalOffset:

   // Calculate the relative location of the icon over the map
  // by finding the ratio of our current location in the
  // map
  double locationMarkerLeft = (_currentLocation.longitude - bounds.southwest.longitude) /
        (bounds.northeast.longitude - bounds.southwest.longitude);
  double locationMarkerTop = (_currentLocation.latitude - bounds.northeast.latitude) /
        (bounds.southwest.latitude - bounds.northeast.latitude);

  return Stack(children: <Widget>[
    Image.memory(_mapImage),
    Align(child: Icon(Icons.location_on),
        alignment: FractionalOffset(locationMarkerLeft, locationMarkerTop)
    )
  ]);
  

Насколько я понимаю, FractionalOffset применяет одинаковое относительное смещение к родительскому и дочернему элементам. Таким образом, хотя это позиционирует значок приблизительно, это не точно.

Итак, как я могу расположить среднюю точку нижнего края значка в определенной точке поверх изображения карты?

Спасибо.

Самым простым решением было бы использовать размер значка (который по умолчанию равен 24) для ваших вычислений.

Вот ваш измененный код:

     // Calculate the relative location of the icon over the map
    // by finding the ratio of our current location in the
    // map
    double locationMarkerLeft = (_currentLocation.longitude - 24/2 - bounds.southwest.longitude) /
        (bounds.northeast.longitude - bounds.southwest.longitude);
    double locationMarkerTop = (_currentLocation.latitude - bounds.northeast.latitude) /
        (bounds.southwest.latitude - bounds.northeast.latitude);

    return Stack(children: <Widget>[
      Image.memory(_mapImage),
      Align(child: Icon(Icons.location_on),
          alignment: FractionalOffset(locationMarkerLeft, locationMarkerTop)
      )
    ]);