android - 将来自 url 的图像添加到自定义 InfoWindow google maps v2

Question

我正在使用一个 android 应用程序。用户在谷歌地图上搜索餐馆。在谷歌地图上显示他所有邻居餐厅的标记。如果他点击一个标记，它会显示一个自定义信息窗口。我的问题是我无法加载从 Google 位置返回的图像。我得到了正确的图像网址，但我无法在窗口中显示它。

信息窗口

<?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 不会停止执行并且图标不会出现。

为什么会这样？

Answer 1

我一直在构建一个类似的应用程序。

首先，您的 InfoWindow 没有显示下载的图像的原因是 MapFragment 将 View 呈现为 Canvas，然后将其绘制。您在信息窗口中看到的不是您创建的 View ，而是它们的“图片”或“屏幕截图”。您基本上需要在 Marker 对象上再次调用 showInfoWindow() ，这将重新渲染 Canvas 并且您的图像现在将可见.

然而，话虽如此，根据我的经验，从 URL 加载 Bitmap 然后设置它并不是最好的解决方案。 Android 不能很好地处理 Bitmap。加载多个位图后，OutOfMemoryError 异常只是时间问题，具体取决于您拥有的系统内存量。

我建议使用 Picasso 库，它处理异步下载和缓存(在内存和磁盘中)并使实际图像加载只需一行(Picasso.with(context).load("http ://i.imgur.com/DvpvklR.png").into(imageView);)。 (更多信息请访问 http://square.github.io/picasso/)

前面的答案很好，只是正如他所说，“延迟”对我的口味来说有点太神奇了。 Picasso 可以选择使用回调，我建议使用它(我在我的应用程序中使用它)。

首先创建一个实现毕加索的Callback接口(interface)的类(它可以是你的activity的内部)，并在构造函数中接收一个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's 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 以反射(reflect)这个想法...你必须看看如何在你的程序逻辑中包含它。如果你不这样做，毕加索回调将调用 showInfoWindow() 并且将重新调用回调，这会想起 showInfoWindow()...好吧，你可以看到递归的去向。:)

主要是通过回调让 Picasso 加载只运行一次，并且在随后的调用中，没有回调。