GoogleMap.InfoWindowAdapter 中的毕加索图像加载问题
Picasso image loading issue in GoogleMap.InfoWindowAdapter
我正在使用 Google 地图 Api 并希望在单击标记时在信息窗口中显示图像。我实现了它,但是 Picasso 有一个问题。当我单击标记时,会显示 infoWindow 并且 imageView 会显示占位符图像。如果我再次单击同一个标记,Picasso 会成功加载图像。我得点两下,太奇怪了
为了更好的理解截图:
首先点击标记:
当我再次点击时:
下面是我的代码:
InfoWindowAdapter(此处加载 Picasso)
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;
}
});
设置标记(使用片段传递图像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));
}
信息窗口布局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>
我解决了。其实这个post就是答案。但我想解释如何做,并提供更多细节来解决我的情况。
显示信息窗口时,它会捕获布局。这意味着 InfoWindows 不是动态的,它们只是一张图片,一张快照。这就是为什么,我们必须在图像加载成功后刷新 InfoWindow。我们可以使用 Picasso 的 Callback 来实现。
我更改了如下代码:
我的新 InfoWindowAdapter Class:
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 和一个布尔值,用于确定是否加载该标记的图像。我正在检查 select 哪个 Picasso 代码应该 运行。如果我不这样做,那就是递归。
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() {}
}
设置标记(使用片段传递图像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));
对我有用的是:
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));
然后创建一个class:
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();
}
}
}
我正在使用 Google 地图 Api 并希望在单击标记时在信息窗口中显示图像。我实现了它,但是 Picasso 有一个问题。当我单击标记时,会显示 infoWindow 并且 imageView 会显示占位符图像。如果我再次单击同一个标记,Picasso 会成功加载图像。我得点两下,太奇怪了
为了更好的理解截图:
首先点击标记:
当我再次点击时:
下面是我的代码:
InfoWindowAdapter(此处加载 Picasso)
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;
}
});
设置标记(使用片段传递图像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));
}
信息窗口布局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>
我解决了。其实这个post就是答案。但我想解释如何做,并提供更多细节来解决我的情况。
显示信息窗口时,它会捕获布局。这意味着 InfoWindows 不是动态的,它们只是一张图片,一张快照。这就是为什么,我们必须在图像加载成功后刷新 InfoWindow。我们可以使用 Picasso 的 Callback 来实现。
我更改了如下代码:
我的新 InfoWindowAdapter Class:
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 和一个布尔值,用于确定是否加载该标记的图像。我正在检查 select 哪个 Picasso 代码应该 运行。如果我不这样做,那就是递归。
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() {}
}
设置标记(使用片段传递图像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));
对我有用的是:
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));
然后创建一个class:
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();
}
}
}