web-dev-qa-db-ja.com

FlutterでGoogleマップマーカーのアイコンサイズを変更する方法

フラッターアプリでgoogle_maps_flutterを使用してGoogleマップを使用しています。カスタムマーカーアイコンがあり、BitmapDescriptor.fromAsset("images/car.png")でこれを読み込みますが、マップ上のアイコンサイズが大きすぎて小さくしたいのですが、できませんでした。そのためのオプションを見つけるには、カスタムマーカーアイコンを変更するオプションがあります。ここに私のフラッターコードがあります：

mapController.addMarker(
        MarkerOptions(
          icon: BitmapDescriptor.fromAsset("images/car.png"),

          position: LatLng(
            deviceLocations[i]['latitude'],
            deviceLocations[i]['longitude'],
          ),
        ),
      );

そして、これは私のAndroidエミュレーターのスクリーンショットです：

写真でわかるように、カスタムアイコンのサイズが大きすぎます

google-mapsflutterdart
21
Daniel.V

TL; DR：任意の画像をUint8Listなどの生のバイトにエンコードできる限り、問題ありませんマーカーとして使用します。

現在、Uint8Listデータを使用して、Googleマップでマーカーを作成できます。つまり、正しいエンコード形式（この特定のシナリオではpng）を保持している限り、rawデータを使用して、マップマーカーとして必要なものをペイントできます。

次の2つの例を見ていきます。

  1. ローカルアセットを選択し、そのサイズを必要に応じて動的に変更して、マップ（Flutterロゴイメージ）にレンダリングします。
  2. キャンバスにいくつかのものを描画し、マーカーとしてもレンダリングしますが、これはany renderウィジェットにすることができます。

これに加えて、静的画像のレンダーウィジェットを変換することもできるため、マーカーとしても使用できます。

1.資産の使用

最初に、アセットパスを処理してサイズを受け取るメソッドを作成します（これは幅、高さ、またはその両方のいずれかですが、1つだけを使用すると比率が維持されます）。

import 'Dart:ui' as ui;

Future<Uint8List> getBytesFromAsset(String path, int width) async {
  ByteData data = await rootBundle.load(path);
  ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(), targetWidth: width);
  ui.FrameInfo fi = await codec.getNextFrame();
  return (await fi.image.toByteData(format: ui.ImageByteFormat.png)).buffer.asUint8List();
}

次に、正しい記述子を使用してマップに追加します。

final Uint8List markerIcon = await getBytesFromAsset('assets/images/flutter.png', 100);
final Marker marker = Marker(icon: BitmapDescriptor.fromBytes(markerIcon));

これにより、幅がそれぞれ50、100、200の場合、以下が生成されます。

asset_example

2.キャンバスを使用する

キャンバスで好きなものを描画して、マーカーとして使用できます。以下は、Hello world!テキストを含む単純な丸いボックスを生成します。

そのため、最初にキャンバスを使用していくつかのものを描画します。

Future<Uint8List> getBytesFromCanvas(int width, int height) async {
  final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
  final Canvas canvas = Canvas(pictureRecorder);
  final Paint paint = Paint()..color = Colors.blue;
  final Radius radius = Radius.circular(20.0);
  canvas.drawRRect(
      RRect.fromRectAndCorners(
        Rect.fromLTWH(0.0, 0.0, width.toDouble(), height.toDouble()),
        topLeft: radius,
        topRight: radius,
        bottomLeft: radius,
        bottomRight: radius,
      ),
      Paint);
  TextPainter Painter = TextPainter(textDirection: TextDirection.ltr);
  Painter.text = TextSpan(
    text: 'Hello world',
    style: TextStyle(fontSize: 25.0, color: Colors.white),
  );
  Painter.layout();
  Painter.Paint(canvas, Offset((width * 0.5) - Painter.width * 0.5, (height * 0.5) - Painter.height * 0.5));
  final img = await pictureRecorder.endRecording().toImage(width, height);
  final data = await img.toByteData(format: ui.ImageByteFormat.png);
  return data.buffer.asUint8List();
}

そして、同じ方法で使用しますが、今回はアセットパスの代わりに必要なデータ（幅や高さなど）を提供します。

final Uint8List markerIcon = await getBytesFromCanvas(200, 100);
final Marker marker = Marker(icon: BitmapDescriptor.fromBytes(markerIcon));

ここにあります。

canvas_example

21
Miguel Ruivo

上記の関数を更新しました。これで、好きなように画像を拡大縮小できます。

  Future<Uint8List> getBytesFromCanvas(int width, int height, urlAsset) async {
    final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
    final Canvas canvas = Canvas(pictureRecorder);

    final ByteData datai = await rootBundle.load(urlAsset);
    var imaged = await loadImage(new Uint8List.view(datai.buffer));
    canvas.drawImageRect(
      imaged,
      Rect.fromLTRB(
          0.0, 0.0, imaged.width.toDouble(), imaged.height.toDouble()),
      Rect.fromLTRB(0.0, 0.0, width.toDouble(), height.toDouble()),
      new Paint(),
    );

    final img = await pictureRecorder.endRecording().toImage(width, height);
    final data = await img.toByteData(format: ui.ImageByteFormat.png);
    return data.buffer.asUint8List();
  }
3
xuetongqin

私は同じ問題を抱えており、この方法で解決します。

Future < Uint8List > getBytesFromCanvas(int width, int height, urlAsset) async 
{
    final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
    final Canvas canvas = Canvas(pictureRecorder);
    final Paint paint = Paint()..color = Colors.transparent;
    final Radius radius = Radius.circular(20.0);
    canvas.drawRRect(
        RRect.fromRectAndCorners(
            Rect.fromLTWH(0.0, 0.0, width.toDouble(), height.toDouble()),
            topLeft: radius,
            topRight: radius,
            bottomLeft: radius,
            bottomRight: radius,
        ),
        Paint);

    final ByteData datai = await rootBundle.load(urlAsset);

    var imaged = await loadImage(new Uint8List.view(datai.buffer));

    canvas.drawImage(imaged, new Offset(0, 0), new Paint());

    final img = await pictureRecorder.endRecording().toImage(width, height);
    final data = await img.toByteData(format: ui.ImageByteFormat.png);
    return data.buffer.asUint8List();
}

Future < ui.Image > loadImage(List < int > img) async {
    final Completer < ui.Image > completer = new Completer();
    ui.decodeImageFromList(img, (ui.Image img) {

        return completer.complete(img);
    });
    return completer.future;
}

そして、このように使用できます。

final Uint8List markerIcond = await getBytesFromCanvas(80, 98, urlAsset);

setState(() {

    markersMap[markerId] = Marker(
        markerId: MarkerId("marker_${id}"),
        position: LatLng(double.parse(place.lat), double.parse(place.lng)),

        icon: BitmapDescriptor.fromBytes(markerIcond),
        onTap: () {
            _onMarkerTapped(placeRemote);
        },

    );
});
2
Cristian r

この問題を解決する最も簡単な方法を見つけました。

Googleマップの実装には以下のバージョンを使用しました。 Googleマップの下位バージョンでは、BitmapDescriptor.fromBytesが機能していません。

 google_maps_flutter: ^0.5.19

マーカーポイントを次のように設定します

Future setMarkersPoint() async {
  var icon = 'your url';
  Uint8List dataBytes;
  var request = await http.get(icon);
  var bytes = await request.bodyBytes;

  setState(() {
    dataBytes = bytes;
  });

  final Uint8List markerIcoenter code heren =
      await getBytesFromCanvas(150, 150, dataBytes);

  var myLatLong = LatLng(double.parse(-6.9024812),
      double.parse(107.61881));

  _markers.add(Marker(
    markerId: MarkerId(myLatLong.toString()),
    icon: BitmapDescriptor.fromBytes(markerIcon),
    position: myLatLong,
   infoWindow: InfoWindow(
     title: 'Name of location',
    snippet: 'Marker Description',
   ),
  ));

}

また、アイコンのサイズを変更する場合は、以下のコードを使用します。

Future<Uint8List> getBytesFromCanvas(
  int width, int height, Uint8List dataBytes) async {
final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
final Canvas canvas = Canvas(pictureRecorder);
final Paint paint = Paint()..color = Colors.transparent;
final Radius radius = Radius.circular(20.0);
canvas.drawRRect(
    RRect.fromRectAndCorners(
      Rect.fromLTWH(0.0, 0.0, width.toDouble(), height.toDouble()),
      topLeft: radius,
      topRight: radius,
      bottomLeft: radius,
      bottomRight: radius,
    ),
    Paint);

var imaged = await loadImage(dataBytes.buffer.asUint8List());
canvas.drawImageRect(
  imaged,
  Rect.fromLTRB(
      0.0, 0.0, imaged.width.toDouble(), imaged.height.toDouble()),
  Rect.fromLTRB(0.0, 0.0, width.toDouble(), height.toDouble()),
  new Paint(),
);

    final img = await pictureRecorder.endRecording().toImage(width, height);
    final data = await img.toByteData(format: ui.ImageByteFormat.png);
    return data.buffer.asUint8List();
 }

    Future<ui.Image> loadImage(List<int> img) async {
    final Completer<ui.Image> completer = new Completer();
    ui.decodeImageFromList(img, (ui.Image img) {
  return completer.complete(img);
});
return completer.future;
}

enter image description here

それがあなたのために働くことを願っています。！！

0
Devangi

BitmapDescriptor.fromAssetImageを試してください。画像サイズも無視されます。

BitmapDescriptor.fromAssetImage(
            ImageConfiguration(size: Size(32, 32)), 'assets/car.png')
        .then((onValue) {
      setState(() {
        markerIcon = onValue;
      });
    });

また、デフォルト構成の使用は失敗します。

loadMarkerImage(BuildContext context) {
    var config = createLocalImageConfiguration(context, size: Size(30, 30));
    BitmapDescriptor.fromAssetImage(config, 'assets/car.png')
        .then((onValue) {
      setState(() {
        markerIcon = onValue;
      });
    });
  }
0
Isuru Dilshan

だから、Uい方法を試すことができます。 MediaQueryは比率を返し、手動で条件を確認します

 double MQ = MediaQuery.of(context).devicePixelRatio;
 String icon = "images/car.png";
 if (MQ>1.5 && MQ<2.5) {icon = "images/car2.png";}
 else if(MQ >= 2.5){icon = "images/car3.png";}
  mapController.addMarker(
    MarkerOptions(
       icon: BitmapDescriptor.fromAsset(icon),
       position: LatLng(37.4219999, -122.0862462),
     ),
   );

次のような画像フォルダに異なるアセット画像を追加する必要があります

-images/car.png
-images/car2.png
-images/car3.png
0
Saed Nabil

この問題を解決するために、どこからでもいくつかのアイデアとコードを混合したソリューションを追加します。最初に画像サイズを管理する機能を追加します。

Future<Uint8List> getBytesFromCanvas(double escala, urlAsset) async {

  final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
  final Canvas canvas = Canvas(pictureRecorder);

  final ByteData datai = await rootBundle.load(urlAsset);
  var imaged = await loadImage(new Uint8List.view(datai.buffer));

  double width = ((imaged.width.toDouble() * escala).toInt()).toDouble();
  double height = ((imaged.height.toDouble() * escala).toInt()).toDouble();

  canvas.drawImageRect(imaged, Rect.fromLTRB(0.0, 0.0, imaged.width.toDouble(), imaged.height.toDouble()),
                              Rect.fromLTRB(0.0, 0.0, width, height),
                              new Paint(),
  );

  final img = await pictureRecorder.endRecording().toImage(width.toInt(), height.toInt());
  final data = await img.toByteData(format: ui.ImageByteFormat.png);
  return data.buffer.asUint8List();

}

Future < ui.Image > loadImage(List < int > img) async {
  final Completer < ui.Image > completer = new Completer();
  ui.decodeImageFromList(img, (ui.Image img) {

    return completer.complete(img);
  });
  return completer.future;
}

次に、デバイスIOSまたはAndroidに応じてこの関数を適用します。 getBytesFromCanvas（）関数は、画像の実サイズのスケールとアセットURLの2つのパラメーターを取ります。

var iconTour;

bool isIOS = Theme.of(context).platform == TargetPlatform.iOS;
if (isIOS){

  final markerIcon = await getBytesFromCanvas(0.7, 'images/Icon.png');
  iconTour = BitmapDescriptor.fromBytes(markerIcon);

}
else{

  final markerIcon = await getBytesFromCanvas(1, 'images/Icon.png');
  iconTour = BitmapDescriptor.fromBytes(markerIcon);

}

setState(() {
  final Marker marker = Marker(icon: iconTour);
});

それで全部です。

0
user2796978

さまざまな密度の適切な画像を選択するために私が働いたのは：

MediaQueryData mediaQueryData = MediaQuery.of(context);
ImageConfiguration imageConfig = ImageConfiguration(devicePixelRatio: mediaQueryData.devicePixelRatio);
BitmapDescriptor.fromAssetImage(imageConfig, "assets/images/marker.png");
0
Diego Laballos