GoogleMap.InfoWindowAdapter 中的毕加索图像加载问题

Question

我正在使用 Google Maps Api，并希望在单击标记时在 InfoWindow 中显示图像。我实现了它，但毕加索有一个问题。当我单击标记时，会显示 infoWindow 并且 imageView 显示占位符图像。如果我再次单击相同的标记，毕加索会成功加载图像。我必须点击两次，太奇怪了。

截图便于理解：

首先点击标记：

当我再次点击时：

下面是我的代码：

InfoWindowAdapter（毕加索在此处加载）

mMap.setInfoWindowAdapter(new GoogleMap.InfoWindowAdapter() {
        @Override
        public View getInfoWindow(Marker marker) {
            return null;
        }

        @Override
        public View getInfoContents(Marker marker) {
            View myContentsView = getLayoutInflater().inflate(R.layout.map_info_content, null);
            ImageView imageView = (ImageView) myContentsView.findViewById(R.id.imgView_map_info_content);
            Picasso.with(MainActivity.this)
                    .load(marker.getSnippet())
                    .placeholder(R.drawable.ic_placeholder)
                    .into(imageView);
            return myContentsView;
        }
    });

设置标记（使用sn-p传递图片url）

for (MediaFeedData item : mItemList) {
        LatLng position = new LatLng(item.getLocation().getLatitude(),
                item.getLocation().getLongitude());
        mMap.addMarker(new MarkerOptions()
                .snippet(item.getImages().getLowResolution().getImageUrl())
                .icon(BitmapDescriptorFactory.fromResource(R.drawable.ic_point))
                .position(position));
    }

InfoWindow 布局 xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ImageView
    android:id="@+id/imgView_map_info_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</LinearLayout>

Answer 1

我解决了。实际上，这个post 就是答案。但我想解释一下如何做到这一点，并提供更多细节来解决我遇到的这个问题。

当显示一个信息窗口时，它会被布局捕获。这意味着 InfoWindows 不是动态的，它们只是一张图片，一个快照。这就是为什么我们必须在图像加载成功后刷新信息窗口。我们可以使用 Picasso 的 Callback 来实现。

我更改了如下代码：

我的新 InfoWindowAdapter 类：

public class MapInfoWindowAdapter implements GoogleMap.InfoWindowAdapter {
    private final Hashtable<String, Boolean> markerSet;
    private Context context;
    private View myContentsView;

    public MapInfoWindowAdapter(Context context, Hashtable<String, Boolean> markerSet) {
        this.context = context;
        this.markerSet = markerSet;
    }

    @Override
    public View getInfoWindow(Marker marker) {
        return null;
    }

    @Override
    public View getInfoContents(Marker marker) {
        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        myContentsView = inflater.inflate(R.layout.map_info_content, null);
        ImageView imageView = (ImageView) myContentsView.findViewById(R.id.imgView_map_info_content);
        boolean isImageLoaded = markerSet.get(marker.getId());
        if (isImageLoaded) {
            Picasso.with(context)
                    .load(marker.getSnippet())
                    .placeholder(R.drawable.ic_placeholder)
                    .into(imageView);
        } else {
            isImageLoaded = true;
            markerSet.put(marker.getId(), isImageLoaded);
            Picasso.with(context)
                    .load(marker.getSnippet())
                    .placeholder(R.drawable.ic_placeholder)
                    .into(imageView, new InfoWindowRefresher(marker));
        }

        return myContentsView;
    }
}

我向它传递了一个标记集，它包含标记 ID 和一个布尔值，以确定该标记的图像是否已加载。我正在检查这个以选择应该运行的毕加索代码。如果我不这样做，那就是递归。

InfoWindowRefresher：

public class InfoWindowRefresher implements Callback {
    private Marker markerToRefresh;

    public InfoWindowRefresher(Marker markerToRefresh) {
        this.markerToRefresh = markerToRefresh;
    }

    @Override
    public void onSuccess() {
        markerToRefresh.showInfoWindow();
    }

    @Override
    public void onError() {}
}

设置标记（使用sn-p传递图片url）：

Hashtable<String, Boolean> markerSet = new Hashtable<>();
for (MediaFeedData item : mItemList) {
    LatLng position = new LatLng(item.getLocation().getLatitude(),
            item.getLocation().getLongitude());
    MarkerOptions markerOptions = new MarkerOptions()
            .snippet(item.getImages().getLowResolution().getImageUrl())
            .icon(BitmapDescriptorFactory.fromResource(R.drawable.ic_point))
            .position(position);
    Marker marker = mMap.addMarker(markerOptions);
    markerSet.put(marker.getId(), false);
}

mMap.setInfoWindowAdapter(new MapInfoWindowAdapter(this, markerSet));

Answer 2

对我有用的是：

在getInfoWindow(Marker marker)里面：

Picasso.with(getActivity())
                            .load(URL)
                            .error(R.drawable.my_loader)
                            .placeholder(R.drawable.my_loader)
                            .into(userPhoto, new MarkerCallback(marker,URL,userPhoto));

然后创建一个类：

public class MarkerCallback implements Callback {
Marker marker=null;
String URL;
ImageView userPhoto;


MarkerCallback(Marker marker, String URL, ImageView userPhoto) {
    this.marker=marker;
    this.URL = URL;
    this.userPhoto = userPhoto;
}

@Override
public void onError() {
    //Log.e(getClass().getSimpleName(), "Error loading thumbnail!");
}

@Override
public void onSuccess() {
    if (marker != null && marker.isInfoWindowShown()) {
        marker.hideInfoWindow();

        Picasso.with(getActivity())
                .load(URL)                        
                .into(userPhoto);

        marker.showInfoWindow();
    }
}

}