Google 使用 Url 映射集群

Question

我使用 google 中的 Android-map-utils 库处理 Google 地图集群。就我而言，我使用 Glide 从 URL:

加载图像

@Override
        protected void onBeforeClusterItemRendered(final FeedsModel feedsModel, final MarkerOptions markerOptions) {
            // Draw a single person.
            // Set the info window to show their name.
            Glide
                    .with(mActivity.getApplicationContext())
                    .load(feedsModel.getImages().getThumbnail().getUrl())
                    .diskCacheStrategy(DiskCacheStrategy.ALL)
                    .into(new SimpleTarget<GlideDrawable>() {
                        @Override
                        public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
                            mImageView.setImageDrawable(resource);
                            Bitmap icon = mIconGenerator.makeIcon();
                            Marker markerToChange = null;
                            for (Marker marker : mClusterManager.getMarkerCollection().getMarkers()) {
                                if (marker.getPosition().equals(feedsModel.getPosition())) {
                                    markerToChange = marker;
                                }
                            }
                            // if found - change icon
                            if (markerToChange != null) {
                                markerToChange.setIcon(BitmapDescriptorFactory.fromBitmap(icon));
                            }
                        }
                    });
            Bitmap icon = mIconGenerator.makeIcon();
            markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon));
        }

        @Override
        protected void onBeforeClusterRendered(final Cluster<FeedsModel> cluster, final MarkerOptions markerOptions) {
            // Draw multiple people.
            // Note: this method runs on the UI thread. Don't spend too much time in here (like in this example).
            final List<Drawable> profilePhotos = new ArrayList<Drawable>(Math.min(4, cluster.getSize()));
            final int width = mDimension;
            final int height = mDimension;

            int i = 0;

            for (final FeedsModel p : cluster.getItems()) {
                // Draw 4 at most.
                i++;
                Glide
                        .with(mActivity.getApplicationContext())
                        .load(p.getImages().getThumbnail().getUrl())
                        .diskCacheStrategy(DiskCacheStrategy.ALL)
                        .into(new SimpleTarget<GlideDrawable>() {
                            @Override
                            public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
                                resource.setBounds(0, 0, width, height);
                                profilePhotos.add(resource);
                                MultiDrawable multiDrawable = new MultiDrawable(profilePhotos);
                                multiDrawable.setBounds(0, 0, width, height);

                                mClusterImageView.setImageDrawable(multiDrawable);
                                Bitmap icon = mClusterIconGenerator.makeIcon(String.valueOf(cluster.getSize()));
                                markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon));
                            }
                        });

                if (i == 4) break;
            }
            Bitmap icon = mClusterIconGenerator.makeIcon(String.valueOf(cluster.getSize()));
            markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon));
        }

通过上面的代码，我看到：放大或缩小时，Item 和 Cluster 中的图像加载错误。我这里有什么问题？

Answer 1

最后，我找到了解决方案，我结合了：

protected void onClusterItemRendered(FeedsModel clusterItem, Marker marker) 
protected void onClusterRendered(Cluster<FeedsModel> cluster, Marker marker)

这些函数从 URL

加载图像

Answer 2

@Override
protected void onBeforeClusterItemRendered(Trace trace, MarkerOptions markerOptions) {
    // Draw a single person.
    // Set the info window to show their name.

    mImageView.setImageResource(R.drawable.aa001); //temp image.
    icon = mIconGenerator.makeIcon();
    markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon));

}
@Override
protected void onClusterItemRendered(final Trace trace, final Marker marker){

    Glide.with(mContext.getApplicationContext())
            .load(ApplicationClass.photoServer + trace.image)
            .diskCacheStrategy(DiskCacheStrategy.ALL)
            .thumbnail(0.1f)
            .into(new SimpleTarget<GlideDrawable>() {
                @Override
                public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
                    mImageView.setImageDrawable(resource);
                    icon = mIconGenerator.makeIcon();
                    marker.setIcon(BitmapDescriptorFactory.fromBitmap(icon));
                }
            });
}

对于集群：

  @Override
    protected void onBeforeClusterRendered(Cluster<Trace> cluster, MarkerOptions markerOptions) {
        super.onBeforeClusterRendered(cluster, markerOptions);
        //pick the first media

        Bitmap icon = mClusterIconGenerator.makeIcon(String.valueOf(cluster.getSize()));
        markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon));

    }

    @Override
    protected void onClusterRendered(Cluster<Trace> cluster, Marker marker) {
        super.onClusterRendered(cluster, marker);
        //pick the first trace 
        final Trace trace = cluster.getItems().iterator().next();

        Glide.with(mContext.getApplicationContext())
                .load(ApplicationClass.photoServer + trace.image)
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .centerCrop()
                .into(new SimpleTarget<GlideDrawable>() {
                    @Override
                    public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
                        mClusterImageView. setImageDrawable(resource);
                        Bitmap icon = mClusterIconGenerator.makeIcon(String.valueOf(cluster.getSize()));
                        marker.setIcon(BitmapDescriptorFactory.fromBitmap(icon));
                    }
                });
    }

Answer 3

隐藏 onBeforeClusterRendered 中的标记。您这样做是为了使标记图标不会在默认图标和您的自定义图标之间闪烁。

在onClusterItemRendered中获取图标位图，加载后将其设置为标记图标并使标记可见。如果位图请求失败，则显示默认图标。

使用 Picasso 进行缓存。

    final String url = "...";
    clusterManager.setRenderer(new DefaultClusterRenderer<MapClusterItem>(activity, googleMap, clusterManager) {

        @Override
        protected void onBeforeClusterItemRendered(MapClusterItem item, MarkerOptions markerOptions) {
            markerOptions.visible(false);
        }

        @Override
        protected void onClusterItemRendered(final MapClusterItem clusterItem, final Marker marker) {

            Picasso.
                    with(context).
                    load(url)
                    .into(new Target() {
                @Override
                public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
                    marker.setIcon(BitmapDescriptorFactory.fromBitmap(bitmap));
                    marker.setVisible(true);
                }

                @Override
                public void onBitmapFailed(Drawable errorDrawable) {
                    marker.setVisible(true);
                }

                @Override
                public void onPrepareLoad(Drawable placeHolderDrawable) {}
            });
        }
    });

Answer 4

这是我在上述解决方案的帮助下找到的解决方案

private class PersonRenderer extends DefaultClusterRenderer<Person> {
    private final IconGenerator mIconGenerator = new IconGenerator(getActivity().getApplicationContext());
    private final IconGenerator mClusterIconGenerator = new IconGenerator(getActivity().getApplicationContext());
    private final ImageView mImageView;
    private final ImageView mClusterImageView;
    private final int mDimension;
    Bitmap icon;

    public PersonRenderer() {
        super(getActivity().getApplicationContext(), mMap, mClusterManager);

        View multiProfile = getLayoutInflater().inflate(R.layout.multi_profile, null);
        mClusterIconGenerator.setContentView(multiProfile);
        mClusterImageView = (ImageView) multiProfile.findViewById(R.id.image);

        mImageView = new ImageView(getActivity().getApplicationContext());
        mDimension = (int) getResources().getDimension(R.dimen.custom_profile_image);
        mImageView.setLayoutParams(new ViewGroup.LayoutParams(mDimension, mDimension));
        int padding = (int) getResources().getDimension(R.dimen.custom_profile_padding);
        mImageView.setPadding(padding, padding, padding, padding);
        mIconGenerator.setContentView(mImageView);
    }

    @Override
    protected void onBeforeClusterItemRendered(Person person, MarkerOptions markerOptions) {
        icon = mIconGenerator.makeIcon();
        markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon)).title(person.name);
    }

    @Override
    protected void onClusterItemRendered(Person clusterItem, final Marker marker) {
        Glide.with(getActivity())
                .load(clusterItem.profilePhoto)
                .apply(new RequestOptions().diskCacheStrategy(DiskCacheStrategy.ALL))
                .thumbnail(0.1f)
                .into(new SimpleTarget<Drawable>() {
                    @Override
                    public void onResourceReady(Drawable drawable, Transition<? super Drawable> transition) {
                        mImageView.setImageDrawable(drawable);
                        icon = mIconGenerator.makeIcon();
                        marker.setIcon(BitmapDescriptorFactory.fromBitmap(icon));
                    }
                });
    }

    @Override
    protected void onClusterRendered(final Cluster<Person> cluster, final Marker marker) {
        final List<Drawable> profilePhotos = new ArrayList<>(Math.min(4, cluster.getSize()));
        final int width = mDimension;
        final int height = mDimension;
        Bitmap dummyBitmap = null;
        Drawable drawable;
        final int clusterSize = cluster.getSize();
        final int[] count = {0};

        for (Person p : cluster.getItems()) {
            // Draw 4 at most.
            if (profilePhotos.size() == 4) break;
            try {
                Glide.with(getActivity().getApplicationContext())
                        .load(p.profilePhoto)
                        .apply(new RequestOptions().diskCacheStrategy(DiskCacheStrategy.ALL))
                        .into(new SimpleTarget<Drawable>(){
                            @Override
                            public void onResourceReady(@NonNull Drawable resource, @Nullable Transition<? super Drawable> transition) {
                                resource.setBounds(0, 0, width, height);
                                profilePhotos.add(resource);
                                MultiDrawable multiDrawable = new MultiDrawable(profilePhotos);
                                multiDrawable.setBounds(0, 0, width, height);

                                mClusterImageView.setImageDrawable(multiDrawable);
                                Bitmap icon = mClusterIconGenerator.makeIcon(String.valueOf(cluster.getSize()));
                                marker.setIcon(BitmapDescriptorFactory.fromBitmap(icon));
                            }
                        });
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        Bitmap icon = mClusterIconGenerator.makeIcon(String.valueOf(cluster.getSize()));
        marker.setIcon(BitmapDescriptorFactory.fromBitmap(icon));
    }

    @Override
    protected void onBeforeClusterRendered(final Cluster<Person> cluster, final MarkerOptions markerOptions) {
    }

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

}

Google 使用 Url 映射集群

Google map Cluster with Url

android

google-maps

markerclusterer

android-glide