2015-05-14 97 views
4

我想向Google地图显示自定义标记并将它们聚类。标记包含将显示从网络下载的头像的ImageView。这是我的目标:enter image description hereAndorid Google地图显示自定义标记和聚集问题

万物都OK,但是,当我实现了Google Maps Android Marker Clustering Utility,该ImageView显示相同的头像(有时两种错误的做法化身)。 enter image description here
这里是我的自定义MarkerRender:

public class MarkerRender extends DefaultClusterRenderer<Image> { 
    private static final String TAG = MarkerRender.class.getSimpleName(); 
    private IconGenerator clusterGenerator; 
    private IconGenerator markerGenerator; 
    private ImageView mImgMarkerThumbnail; 
    private ImageView mImgMarkerClusterThumbnail; 
    private TextView txtSizeCluster; 
    private Activity activity; 
    private Bitmap mask, background; 
    private AtomicInteger imageDownloadCounter; 
    private int totalItem; 
    private ImageSize imageSize; 

    public MarkerRender(FragmentActivity activity, GoogleMap mMap, ClusterManager<Image> mClusterManager) { 
     super(activity, mMap, mClusterManager); 
     this.activity = activity; 
     imageDownloadCounter = new AtomicInteger(0); 
     mask = BitmapFactory.decodeResource(activity.getResources(), 
       R.drawable.annotation_behind); 
     background = BitmapFactory.decodeResource(activity.getResources(), 
       R.drawable.annotation_behind); 
     setUpClusterIcon(); 
     setUpMarker(); 
    } 

    private void setUpClusterIcon() { 
     clusterGenerator = new IconGenerator(activity); 
     View clusterView = activity.getLayoutInflater().inflate(R.layout.custom_marker_cluster, null); 
     txtSizeCluster = (TextView) clusterView.findViewById(R.id.tv_number_marker); 
     mImgMarkerClusterThumbnail = (ImageView) clusterView.findViewById(R.id.img_load); 
     clusterGenerator.setContentView(clusterView); 
     clusterGenerator.setBackground(null); 
    } 

    private void setUpMarker() { 
     markerGenerator = new IconGenerator(activity); 
     View markerView = activity.getLayoutInflater().inflate(R.layout.custom_marker, null); 
     mImgMarkerThumbnail = (ImageView) markerView.findViewById(R.id.img_load); 
     markerGenerator.setContentView(markerView); 
     markerGenerator.setBackground(null); 

    } 

    @Override 
    protected void onBeforeClusterItemRendered(final Image image, final MarkerOptions markerOptions) { 
     initImageSizeIfNeed(); 
     Bitmap icon = markerGenerator.makeIcon(); 
     PFLogManager.INSTANCE.logE(TAG, "maken icon: " + icon.hashCode()); 
     markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon)); 
     icon.recycle(); 
    } 

    @Override 
    protected void onClusterItemRendered(final Image image, Marker marker) { 
     super.onClusterItemRendered(image, marker); 
     ImageLoader.getInstance().loadImage(image.getMapImageLink(), imageSize, 
       new SimpleImageLoadingListener() { 
        @Override 
        public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) { 
         Bitmap croppedBitmap = Helpers.makeCroppedBitmap(loadedImage, background, mask); 
         mImgMarkerThumbnail.setImageBitmap(croppedBitmap); 
        } 
       }); 
    } 

    @Override 
    protected void onBeforeClusterRendered(Cluster<Image> cluster, MarkerOptions markerOptions) { 
     initImageSizeIfNeed(); 
     Bitmap icon = clusterGenerator.makeIcon(); 
     markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon)); 
     icon.recycle(); 
    } 

    @Override 
    protected void onClusterRendered(Cluster<Image> cluster, Marker marker) { 
     super.onClusterRendered(cluster, marker); 
     ArrayList<Image> list = new ArrayList<>(cluster.getItems()); 
     setTextNumberMarker(cluster); 
     String urlFirstImage = list.get(0).getMapImageLink(); 
     ImageLoader.getInstance().loadImage(urlFirstImage, imageSize, 
       new SimpleImageLoadingListener() { 
        @Override 
        public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) { 
         final Bitmap croppedBitmap = Helpers.makeCroppedBitmap(loadedImage, background, mask); 
         mImgMarkerClusterThumbnail.setImageBitmap(croppedBitmap); 
        } 
       }); 
    } 

    private void loadClusterThumbnail(String url) { 
    } 

    private void setTextNumberMarker(Cluster<Image> cluster) { 
     int size = cluster.getSize(); 
     if (size > 99) { 
      txtSizeCluster.setText("99+"); 
     } else { 
      txtSizeCluster.setText(String.valueOf(cluster.getSize())); 
     } 
    } 

    @Override 
    protected boolean shouldRenderAsCluster(Cluster cluster) { 
     return cluster.getSize() > 1; 
    } 

} 


我一直想这个问题是我只用一个ImageView显示这些化身,所以我尝试使用独特ImageView每个标记(由inflat新每次需要一个xml),但结果是他们都显示空白标记(只是背景,没有头像)。
我花了3天的研究没有结果,请帮帮我!

+0

你如何创建标记掩码和自定义视图标记? –

回答

4

我自己解决了。从网络下载图像或从缓存中获取图像后,我的解决方案是使用Marker.setIcon()方法。我不再使用ImageView。
所以,我改性上述MarkerRender类:
setUpClusterIcon()方法:

private void setUpClusterIcon() { 
    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(markerWidth, markerHeight); 
    ImageView marker = new ImageView(activity); 
    marker.setLayoutParams(params); 

    clusterGenerator = new IconGenerator(activity); 
    clusterGenerator.setContentView(marker); 
    clusterGenerator.setBackground(null); 
} 


onClusterItemRendered()方法:

protected void onClusterItemRendered(final Image image, final Marker marker) { 
     super.onClusterItemRendered(image, marker); 
     ImageLoader.getInstance().loadImage(image.getMapImageLink(), imageSize, 
       new SimpleImageLoadingListener() { 
        @Override 
        public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) { 
         Bitmap croppedBitmap = Helpers.makeClusterItemBitmap(background, loadedImage, mask); 
         try { 
          marker.setIcon(BitmapDescriptorFactory.fromBitmap(croppedBitmap)); 
         } catch (Exception e) { 
          e.printStackTrace(); 
         } 
        } 
       }); 
    } 


另外,makeClusterItemBitmap辅助方法:

public static Bitmap makeClusterItemBitmap(Bitmap background, Bitmap original, Bitmap mask) { 
     Bitmap croppedOriginal = makeCroppedBitmap(original, mask); 
     Bitmap result = Bitmap.createBitmap(background.getWidth(), background.getHeight(), 
       Bitmap.Config.ARGB_8888); 
     Canvas mCanvas = new Canvas(result); 
     croppedOriginal = Bitmap.createScaledBitmap(croppedOriginal, croppedOriginal.getWidth() - 20, croppedOriginal.getHeight() - 20, true); 
     mCanvas.drawBitmap(background, 0, 0, null); 
     mCanvas.drawBitmap(croppedOriginal, 10, 10, null); 
     return result; 
    } 

    public static Bitmap makeCroppedBitmap(Bitmap original, Bitmap mask) { 
     original = Bitmap.createScaledBitmap(original, mask.getWidth(), 
       mask.getHeight(), true); 
     Bitmap result = Bitmap.createBitmap(original.getWidth(), original.getHeight(), 
       Bitmap.Config.ARGB_8888); 
     Canvas mCanvas = new Canvas(result); 
     Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); 
     paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN)); 
     mCanvas.drawBitmap(original, 0, 0, null); 
     mCanvas.drawBitmap(mask, 0, 0, paint); 
     paint.setXfermode(null); 
     return result; 
    } 


完成,完成三个噩梦研究日:P
但是,这种方法导致新问题:the performance。原因是通过绘制多个图层的新位图,地图有点滞后。我正在考虑改进:)
任何建议是appriciate:D

+0

我认为使用PreProcessor或PostProcessor可以很好地选择DisplayImageOptions中的位图转换任务,并将其设置为imageloader。在我看来,缓存转换后的图像对于性能来说也是非常棒的。 – subhash