如何在 Google Maps with picasso 上的 infoWindow 中获取图像 - Android

Question

我创建了一个实现 MapsView 的应用程序。当我单击标记时，它会显示信息 window，其中使用 picasso 从数据库中检索数据。它工作正常，但问题是信息 window 中的图像没有显示我需要的图像，它仍然显示占位符图像。但是当我单击地图并再次单击标记时，它会显示我需要的图像。但是如果我没有点击地图（仍然点击标记），它仍然总是显示占位符标记。如何定时显示我需要的图像（占位符图像将替换为我需要的图像）？

这是我的代码

public void plotMarkers(ArrayList<MyMarker> markers) {
    if(markers.size() > 0) {
        for (MyMarker myMarker : markers)
        {
            dest = new LatLng(myMarker.getmLatitude(), myMarker.getmLongitude());
            markerOption = new MarkerOptions().position(dest);
            location_marker = mMap.addMarker(markerOption);
            Target target = new PicassoMarker(location_marker);
            targets.add(target);

            ImageView image = new ImageView(this);
            image.setImageResource(R.mipmap.marker);
            int width = image.getDrawable().getIntrinsicWidth();
            int height = image.getDrawable().getIntrinsicHeight();

            Picasso.with(MapsActivity.this).load(myMarker.getmIcon()).resize(width, height).onlyScaleDown().into(target);
            mMarkersHashMap.put(location_marker, myMarker);

            i = getIntent();
            if(i.getBooleanExtra("maps", true)) {
                location_marker.setTitle(i.getStringExtra("nama"));
                mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(dest, 16));
            }
            else {
                mMap.setInfoWindowAdapter(new MarkerInfoWindowAdapter());
            }
        }
    }
}

public class MarkerInfoWindowAdapter implements GoogleMap.InfoWindowAdapter
{
    @Override
    public View getInfoWindow(Marker marker) {
        return null;
    }

    @Override
    public View getInfoContents(Marker marker) {
        View v  = getLayoutInflater().inflate(R.layout.info_windowlayout, null);

        MyMarker myMarker = mMarkersHashMap.get(marker);

        TextView markerLabel = (TextView) v.findViewById(R.id.marker_label);
        markerLabel.setText(myMarker.getmLabel());

        ImageView foto = (ImageView) v.findViewById(R.id.foto);
        Picasso.with(getApplicationContext()).load(myMarker.getmImage()).placeholder(R.layout.progress).error(R.mipmap.error).into(foto);

        TextView anotherLabel = (TextView) v.findViewById(R.id.another_label);
        anotherLabel.setText("Baca selengkapnya...");

        return v;
    }
}

Answer 1

信息 window 基本上是位图，是从您填充的视图中捕获的。因此，对这些视图的更改——例如 Picasso 异步更新 ImageView——不会更新信息 window.

一个可行的解决方案是在 Picasso 获取并缓存图像后在 Marker 上调用 showInfoWindow()。例如，this sample app 使用 Picasso 填充信息 windows，并使用 Picasso Callback 调用 showInfoWindow():

/***
  Copyright (c) 2013-2014 CommonsWare, LLC
  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy
  of the License at http://www.apache.org/licenses/LICENSE-2.0. Unless required
  by applicable law or agreed to in writing, software distributed under the
  License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS
  OF ANY KIND, either express or implied. See the License for the specific
  language governing permissions and limitations under the License.

  From _The Busy Coder's Guide to Android Development_
    https://commonsware.com/Android
 */

package com.commonsware.android.mapsv2.imagepopups;

import android.annotation.SuppressLint;
import android.content.Context;
import android.net.Uri;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.HashMap;
import com.google.android.gms.maps.GoogleMap.InfoWindowAdapter;
import com.google.android.gms.maps.model.Marker;
import com.squareup.picasso.Callback;
import com.squareup.picasso.Picasso;

class PopupAdapter implements InfoWindowAdapter {
  private View popup=null;
  private LayoutInflater inflater=null;
  private HashMap<String, Uri> images=null;
  private Context ctxt=null;
  private int iconWidth=-1;
  private int iconHeight=-1;
  private Marker lastMarker=null;

  PopupAdapter(Context ctxt, LayoutInflater inflater,
               HashMap<String, Uri> images) {
    this.ctxt=ctxt;
    this.inflater=inflater;
    this.images=images;

    iconWidth=
        ctxt.getResources().getDimensionPixelSize(R.dimen.icon_width);
    iconHeight=
        ctxt.getResources().getDimensionPixelSize(R.dimen.icon_height);
  }

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

  @SuppressLint("InflateParams")
  @Override
  public View getInfoContents(Marker marker) {
    if (popup == null) {
      popup=inflater.inflate(R.layout.popup, null);
    }

    if (lastMarker == null
        || !lastMarker.getId().equals(marker.getId())) {
      lastMarker=marker;

      TextView tv=(TextView)popup.findViewById(R.id.title);

      tv.setText(marker.getTitle());
      tv=(TextView)popup.findViewById(R.id.snippet);
      tv.setText(marker.getSnippet());

      Uri image=images.get(marker.getId());
      ImageView icon=(ImageView)popup.findViewById(R.id.icon);

      if (image == null) {
        icon.setVisibility(View.GONE);
      }
      else {
        Picasso.with(ctxt).load(image).resize(iconWidth, iconHeight)
               .centerCrop().noFade()
               .placeholder(R.drawable.placeholder)
               .into(icon, new MarkerCallback(marker));
      }
    }

    return(popup);
  }

  static class MarkerCallback implements Callback {
    Marker marker=null;

    MarkerCallback(Marker marker) {
      this.marker=marker;
    }

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

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

基本上，如果当 Picasso 获取图像时，信息 window 仍然为关联的 Marker 打开，我调用 showInfoWindow()。视觉效果类似于正常的 Picasso 行为：一个占位符，然后是替换占位符的真实图像。

Answer 2

kotlin 版本

   Picasso.get()
            .load(it.avatar)
            .placeholder(R.drawable.ic_person_black_24dp)
            .error(R.drawable.ic_person_black_24dp)
            .into(avatarView, object : Callback {
                override fun onSuccess() {
                    if (marker != null && marker.isInfoWindowShown) {
                        marker.hideInfoWindow()
                        marker.showInfoWindow()
                    }
                }

                override fun onError(e: Exception?) {
                    Timber.e("Error loading avatar to info window!")
                }
            })

如何在 Google Maps with picasso 上的 infoWindow 中获取图像 - Android

How to get image in infoWindow on Google Maps with picasso - Android

android

google-maps-markers

google-maps-android-api-2