Блог

Я хотел бы отобразить изображение в режиме наложения в заданных широтах при Google map использовании Flutter . Я использую пакет flutter google_maps_flutter: 0.5.32 , в настоящее время пакет не предоставляет для реализации этой функции .

Я смог найти решение этой проблемы. На данный момент я реализовал это в Android, но еще не для IOS.

На самом деле это было довольно просто, как только я понял это. Но сначала нужно было выполнить небольшую наземную работу.

Сначала я создал methodChannel для своего приложения. В этом канале метода я передал строку XML, которая содержит один или несколько groundOverlays . Это включает в себя основы координат GPS, местоположение файла моего JPG.

Во-вторых, я создал класс с именем MapOverlays , который является статическим классом и содержит список класса с именем MapOverlay . Для меня это просто способ сделать несколько наложений одновременно.

Сделайте это из Android Studio, где вы открываете папку Android в проекте Flutter. Вы должны знать, как это сделать, если вы создали methodChannel и особенно запускаете его для отладки.

Эти классы были созданы в:

 google_maps_flutter/java/io.flutter.plugins.googlemaps
  

Как только я сделаю это, я смогу получить XML-строку через канал метода и передать ее конструктору, для MapOverlays которого выполняется синтаксический анализ XML-кода и создается массив MapOverlay элементов.

После завершения этой работы отображение наложения на карте Google при его создании становится тривиальным.

Я должен скопировать / вставить следующий код в GoogleMapController.java класс. Это происходит в самом конце метода onMapReady() .

СМОТРИТЕ ЗАКЛЮЧИТЕЛЬНОЕ ПРИМЕЧАНИЕ ВНИЗУ!

     ArrayList<MapOverlays.MapOverlay> mapOverlays =  MapOverlays.getMapOverlays();
    
        for (MapOverlays.MapOverlay mo: mapOverlays) {
          if (mo.getVisible()) {
            LatLng southWest = new LatLng(mo.getSouth(), mo.getWest());
            LatLng northEast = new LatLng(mo.getNorth(), mo.getEast());
            LatLngBounds bounds = new LatLngBounds(southWest, northEast);
            Bitmap bitmap = BitmapFactory.decodeFile(mo.getImageLocation());
            GroundOverlayOptions mapOptions = new GroundOverlayOptions().image(BitmapDescriptorFactory.fromBitmap(bitmap));
            mapOptions.positionFromBounds(bounds);
            mapOptions.bearing(mo.getBearing()*-1);
            mapOptions.transparency(mo.getTransparency());
    
            GroundOverlay groundOverlay = this.googleMap.addGroundOverlay(mapOptions);
          }
      }
  

Заключительное замечание: я знаю, что это своего рода взлом. Но мне нужна была эта функция, и я не хотел писать свою собственную флаттерную карту Google. Я посмотрел на брошюру ( flutter_map плагин), которая выглядела действительно многообещающей, и реализовал OverlayImage элемент, который был тривиальным, как только я понял, что это элемент, который будет работать. Однако, flutter_map не поддерживает подшипник / вращение. У меня есть много groundOverlay карт, которые я создал с помощью Google Планета Земля, и все они имеют некоторое вращение. Без этого карты не выстраивались в линию flutter_map , и я не мог понять, как изменить код для поворота. Итак, это была остановка показа.

Я действительно удивлен, что flutter_google_maps не поддерживает наземные наложения. Было бы довольно тривиально добавить эту поддержку для Android. Я надеюсь, что iOS тоже будет.

Мой последний комментарий заключается в том, что вы изменяете код Google, который кэшируется из плагина Flutter. Каждый раз, когда вы обновляете flutter_google_maps (или очищаете каким-либо другим способом), вам нужно будет повторно применить эти изменения.

Но на данный момент я могу найти обходной путь для крайне необходимой функции.

Я искал решение в течение нескольких месяцев. Так что, возможно, это также поможет кому-то еще.