Добавьте изображение с URL в пользовательские InfoWindow google maps v2
Я работаю в приложении для Android. Пользователь выполняет поиск на картах Google для ресторанов. В марке отображения карты google для всего своего соседнего ресторана. Если он нажат на маркер, он отобразит пользовательский InfoWindow. Моя проблема заключается в том, что я не могу загрузить изображение, которое возвращается в Google. Я получаю правильный URL-адрес изображения, но я не могу показать его в окне.
InfoWindow
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@color/bg_color" >
<ImageView
android:id="@+id/place_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"" />
<TextView
android:id="@+id/place_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/place_vicinity"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="@color/bg_color" >
<RatingBar
android:id="@+id/place_rating"
style="?android:attr/ratingBarStyleSmall"
android:numStars="5"
android:rating="0"
android:isIndicator="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip" />
<ImageView
android:id="@+id/navigate_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:src="@drawable/navigate" />
</LinearLayout>
На создание у меня это
mGoogleMap.setInfoWindowAdapter(new InfoWindowAdapter() {
// Use default InfoWindow frame
@Override
public View getInfoWindow(Marker arg0) {
return null;
}
// Defines the contents of the InfoWindow
@Override
public View getInfoContents(Marker arg0) {
// Getting view from the layout file info_window_layout
View v = getLayoutInflater().inflate(R.layout.info_window_layout, null);
// Getting the snippet from the marker
String snippet = arg0.getSnippet();
// Getting the snippet from the marker
String titlestr = arg0.getTitle();
String cutchar1= "%#";
String cutchar2= "%##";
String ratingstr = snippet.substring(0,snippet.indexOf( cutchar1 ));
String vicinitystr = snippet.substring(snippet.indexOf( cutchar1 )+2, snippet.indexOf( cutchar2 ) );
String iconurl= snippet.substring(snippet.indexOf( cutchar2 )+3);
// Getting reference to the TextView to set latitude
TextView title = (TextView) v.findViewById(R.id.place_title);
TextView vicinity = (TextView) v.findViewById(R.id.place_vicinity);
ImageView image = (ImageView) v.findViewById(R.id.navigate_icon);
// Setting the latitude
title.setText(titlestr);
// declare RatingBar object
RatingBar rating=(RatingBar) v.findViewById(R.id.place_rating);// create RatingBar object
if( !(ratingstr.equals("null")) ){
rating.setRating(Float.parseFloat(ratingstr));
}
vicinity.setText(vicinitystr);
final DownloadImageTask download = new DownloadImageTask((ImageView) v.findViewById(R.id.place_icon) ,arg0);
download.execute(iconurl);
// Returning the view containing InfoWindow contents
return v;
}
});
и код DownloadImage:
private class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {
ImageView bmImage;
Marker marker;
boolean refresh;
public DownloadImageTask(final ImageView bmImage, final Marker marker) {
this.bmImage = bmImage;
this.marker=marker;
this.refresh=false;
}
public void SetRefresh(boolean refresh ){
this.refresh=true;
}
/* @Override
protected void onPreExecute()
{
super.onPreExecute();
bmImage.setImageBitmap(null);
}*/
@Override
protected Bitmap doInBackground(String... urls) {
String urldisplay = urls[0];
Bitmap mIcon11 = null;
try {
InputStream in = new java.net.URL(urldisplay).openStream();
mIcon11 = BitmapFactory.decodeStream(in);
} catch (Exception e) {
Log.e("Error", e.getMessage());
e.printStackTrace();
}
return mIcon11;
}
@Override
protected void onPostExecute(Bitmap result) {
if(!refresh){
SetRefresh(refresh);
bmImage.setImageBitmap(result);
marker.showInfoWindow();
}
}
}
Наконец, когда я выполняю код и нажимаю маркер, getInfoContents не прекращает выполнение, и значок не появляется.
Почему это происходит?
Ответы
Ответ 1
Я создаю подобное приложение.
Прежде всего, причина, по которой ваш InfoWindow не показывает загруженное изображение, состоит в том, что MapFragment
отображает представление в Canvas
, а затем рисует его. То, что вы видите в информационном окне, - это не созданные вами виды, а "фотография" или "скриншот". Вам в основном нужно называть showInfoWindow()
снова на объекте Marker
, и он будет повторно отображать Canvas
, и ваше изображение теперь будет видимым.
Однако, как я уже сказал, по моему опыту загрузив Bitmap
из URL-адреса, а затем установив его, это не лучшее решение. Android не поддерживает Bitmap
очень хорошо. После загрузки нескольких растровых изображений исключение OutOfMemoryError
- это всего лишь вопрос времени, в зависимости от объема имеющейся у вас системной памяти.
Я бы рекомендовал использовать библиотеку Picasso, которая обрабатывает асинхронную загрузку и кеширование (в памяти и на диске) и делает фактическую загрузку изображения только одной строкой (Picasso.with(context).load("http://i.imgur.com/DvpvklR.png").into(imageView);
). (подробнее на http://square.github.io/picasso/)
Предыдущий ответ был хорошим, за исключением того, что, как он сказал, эта "задержка" немного волшебна для моего вкуса. У Picasso есть возможность использовать обратные вызовы, и я бы рекомендовал использовать это (я использую это в своем приложении).
Сначала создайте класс (он может быть внутренним для вашей активности), который реализует интерфейс Picasso Callback
и получает конструктор Marker
в конструкторе (так что вы можете снова вызвать showInfoWindow()
на этом маркере.
private class InfoWindowRefresher implements Callback {
private Marker markerToRefresh;
private InfoWindowRefresher(Marker markerToRefresh) {
this.markerToRefresh = markerToRefresh;
}
@Override
public void onSuccess() {
markerToRefresh.showInfoWindow();
}
@Override
public void onError() {}
}
Информационное окно выглядит следующим образом:
mMap.setInfoWindowAdapter(new GoogleMap.InfoWindowAdapter() {
@Override
public View getInfoWindow(Marker marker) {
// inflate view window
// set other views content
// set image view like this:
if (not_first_time_showing_info_window) {
Picasso.with(ActivityClass.this).load(restaurantPictureURL).into(imgInfoWindowPicture);
} else { // if it the first time, load the image with the callback set
not_first_time_showing_info_window=true;
Picasso.with(ActivityClass.this).load(restaurantPictureURL).into(imgInfoWindowPicture,new InfoWindowRefresher(marker));
}
return v;
}
@Override
public View getInfoContents(Marker marker) {
return null;
}
});
Обратный вызов довольно прост, как вы можете видеть. Однако при использовании этого метода вы ДОЛЖНЫ быть осторожны, чтобы использовать обратный вызов только при первом вызове, а не в последующих вызовах (я просто ввел это not_first_time_showing_info_window
, чтобы отразить идею... вы, вам нужно будет увидеть, как включить это в логику вашей программы. Если вы этого не сделаете, обратный вызов Picasso вызовет showInfoWindow()
и повторит вызов обратного вызова, который вызовет showInfoWindow()
... ну, вы может видеть, куда идет рекурсия.:)
Главное, чтобы загрузка Picasso с обратным вызовом выполнялась только один раз и при последующих вызовах без обратного вызова.
Ответ 2
Я решил эту проблему, используя черную магию (также установив задержку). Я воспользовался кэшированием Picasso и просто вызвал showInfoWindow через несколько миллисекунд после начала начальной загрузки.
Вот мой CustomWindowAdapter.
class CustomWindowAdapter implements InfoWindowAdapter{
LayoutInflater mInflater;
Map<Marker, String> imageStringMapMarker;
Context context;
public CustomWindowAdapter(LayoutInflater i, Map<Marker, String> imageStringMapMarker2, Context context ){
mInflater = i;
imageStringMapMarker = imageStringMapMarker2;
}
@Override
public View getInfoContents(final Marker marker) {
View v = mInflater.inflate(R.layout.custom_info_window, null);
ImageView ivThumbnail = (ImageView) v.findViewById(R.id.ivThumbnail);
String urlImage = imageStringMapMarker.get(marker).toString();
Picasso.with(context).load(Uri.parse(urlImage)).resize(250,250).into(ivThumbnail);
return v;
}
@Override
public View getInfoWindow(Marker marker) {
// TODO Auto-generated method stub
return null;
}
}
И вот метод вызова информационного окна в моей основной деятельности, где я реализую задержку.
myMap.setInfoWindowAdapter(new CustomWindowAdapter(this.getLayoutInflater(),
imageStringMapMarker, getApplicationContext()));
myMap.setOnMarkerClickListener(new OnMarkerClickListener() {
@Override
public boolean onMarkerClick(final Marker mark) {
mark.showInfoWindow();
final Handler handler = new Handler();
handler.postDelayed(new Runnable() {
@Override
public void run() {
mark.showInfoWindow();
}
}, 200);
return true;
}
});
Ответ 3
Что бы вы ни вернули из getInfoContents()
, в этот момент преобразуется в Bitmap
и используется для отображения результатов. Вы не показываете изображение до тех пор, пока загрузка не будет завершена, и через какой-то момент Bitmap
уже создан и используется.
Вам необходимо загрузить изображение до того, как был вызван getInfoContents()
.
Ответ 4
Я делаю это, также ссылаясь на ответ @Daniel Gray:
if (userImg.getDrawable() == null) {
Picasso.with(ctx).load(UtilitiesApp.urlServer + user.getImgUrl())
.error(R.drawable.logo)
.into(userImg, new InfoWindowRefresher(marker));
} else {
Picasso.with(ctx).load(UtilitiesApp.urlServer + user.getImgUrl())
.error(R.drawable.logo)
.into(userImg);
}
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() {}
}