如何在 Google Maps with glide 的 infoWindow 中获取图像 - Android

Question

我正在使用 google 地图开发应用程序。我需要有两个文本和图像源的 custominfowindow。

这是我的 infocontents() 代码。使用 firebase，Google 地图，Glide 但它不起作用请帮助。

  @Override
    public View getInfoWindow(Marker marker) {
        return null;
    }

    @Override
    public View getInfoContents(Marker marker) {
        final View v = getLayoutInflater().inflate(R.layout.custom_window, null);

        infoWindowProfile = (CircleImageView) v.findViewById(R.id.ci_custom_profile);
        infoWindowPr = (TextView) v.findViewById(R.id.tv_custom_pr);
        String uidTemp = marker.getSnippet();
        Log.d("markerproper", "uid(snippet) : " + uidTemp);
        database = FirebaseDatabase.getInstance();
        markerRef = database.getReference().child("truck").child(uidTemp);
        markerRef.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot dataSnapshot) {
                Map<String, ZariPosts> zariPost = (Map<String, ZariPosts>) dataSnapshot.getValue();
                markerProfileUrl = String.valueOf(zariPost.get("profileUrl"));
                markerPr = String.valueOf(zariPost.get("pr"));
                Log.d("markerproper", "uid(markerProfileUrl) : " + markerProfileUrl);
                Log.d("markerproper", "uid(markerPr) : " + markerPr);


                Glide.with(SearchActivity.this)
                        .load(markerProfileUrl)
                        .centerCrop()
                        .into(infoWindowProfile);

                infoWindowPr.setText(markerPr);
            }
            @Override
            public void onCancelled(DatabaseError databaseError) {

            }
        });
        return v;
    }

Answer 1

来自 https://github.com/bumptech/glide/issues/290

您可以尝试将以下内容添加到您的 getInfoContent() 方法中。相应地更改 url 和 imageView 名称。

Glide.with(mContext).load(imageURL).asBitmap().override(50,50).listener(new RequestListener<String, Bitmap>() {
    @Override
    public boolean onException(Exception e, String model, Target<Bitmap> target, boolean isFirstResource) {
        e.printStackTrace();
        return false;
    }

    @Override
    public boolean onResourceReady(Bitmap resource, String model, Target<Bitmap> target, boolean isFromMemoryCache, boolean isFirstResource) {
        if(!isFromMemoryCache) marker.showInfoWindow();
        return false;
    }
}).into(imageView);

Answer 2

Kotlin 修复：

首先，非常感谢为这个问题做出贡献的每个人以及喜欢它的其他人。我能够通过拼凑的代码得到一些有用的东西。如果您正在使用 Glide 并遇到此问题，这就是我所拥有的，我正在使用自定义信息 window 并将数据 class 设置为标记的标签。

class CompanyMarkerCustomInfoWindow(val context: Context) : GoogleMap.InfoWindowAdapter {

override fun getInfoWindow(marker: Marker?): View? {
    return null
}

override fun getInfoContents(marker: Marker): View {
    val layoutInflater = (context as Activity).layoutInflater
    val binding = ItemCompanyMapMarkerBinding.inflate(layoutInflater)
    val infoWindowData: CompanyMapMarkerModel? = marker.tag as CompanyMapMarkerModel?
    binding.model = infoWindowData
    binding.executePendingBindings()

    if (infoWindowData?.loadImage != null) {
        val finalImageUrl = Constants.BASE_URL + infoWindowData.loadImage
        Glide.with(context)
            .load(finalImageUrl)
            .placeholder(R.drawable.ic_baseline_broken_image_24)
            .listener(MarkerCallback(marker))
            .into(binding.loadImage)
    }

    if (infoWindowData?.companyImage != null) {
        val finalImageUrl = Constants.BASE_URL + infoWindowData.companyImage
        Glide.with(context)
            .load(finalImageUrl)
            .placeholder(R.drawable.ic_baseline_broken_image_24)
            .listener(MarkerCallback(marker))
            .into(binding.companyProfileImage)
    }

    return binding.root
}

class MarkerCallback internal constructor(marker: Marker?) :
    RequestListener<Drawable> {

    var marker: Marker? = null

    private fun onSuccess() {
        if (marker != null && marker!!.isInfoWindowShown) {
            marker!!.hideInfoWindow()
            marker!!.showInfoWindow()
        }
    }

    init {
        this.marker = marker
    }

    override fun onLoadFailed(
        e: GlideException?,
        model: Any?,
        target: Target<Drawable>?,
        isFirstResource: Boolean
    ): Boolean {
        Log.e(javaClass.simpleName, "Error loading thumbnail! -> $e")
        return false
    }

    override fun onResourceReady(
        resource: Drawable?,
        model: Any?,
        target: Target<Drawable>?,
        dataSource: DataSource?,
        isFirstResource: Boolean
    ): Boolean {
        onSuccess()
        return false
    }
}

}

地图结果

Answer 3

简单易行的 Kotlin 解决方案（取自 https://github.com/bumptech/glide/issues/290）：

    //initiate those two variables
    private val images: HashMap<Marker, Bitmap> = HashMap()
    private val targets: HashMap<Marker, CustomTarget<Bitmap>> = HashMap()

    //create this inner class
    inner class InfoTarget(var marker: Marker) : CustomTarget<Bitmap>() {
        override fun onLoadCleared(@Nullable placeholder: Drawable?) {
            images.remove(marker)
        }

        override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
            images.put(marker, resource)
            marker.showInfoWindow()
        }
    }
    
    //Create this method
    private fun getTarget(marker: Marker): CustomTarget<Bitmap> {
        var target = targets[marker]
        if (target == null) {
            target = InfoTarget(marker)
            targets[marker] = target // missing in original (fixed 2018 August)
        }
        return target
    }

//insert image here (in your acctual population code)
val image = images[marker]
if (image == null) {
    Glide.with(activity)
        .asBitmap()
        .load(pic_url)
        .dontAnimate()
        .into(getTarget(marker))
} else {
    imageView.setImageBitmap(image)
}

Answer 4

使用 Picasso，解决了我第一次加载不上图片的问题。在 CustomInfoAdapter 内部 class.

override fun getInfoWindow(marker: Marker): View? {
    // This function is required, but can return null if
    // not replacing the entire info window

    // Set the marker's title and snippet to the appropriate text view
    // in the layout created.

    val titleView = contents.findViewById<TextView>(R.id.title)
    titleView.text = marker.title.split("https://")[0] ?: ""

    val phoneView = contents.findViewById<TextView>(R.id.phone)
    phoneView.text = marker.snippet ?: ""
    val userImage = contents.findViewById<ImageView>(R.id.profile_image)
    val photoUri = "https://${marker.title.split("https://")[1]}"
    Log.d("InfoWindowAdapter", "getInfoContents: $photoUri")

    Picasso.with(userImage.context)
        .load(photoUri)
        .placeholder(R.drawable.loading_status_animation)
        .error(R.drawable.ic_error_image)
        .into(userImage, object : Callback {
            override fun onSuccess() {
                if (marker.isInfoWindowShown) {
                    marker.hideInfoWindow()
                    marker.showInfoWindow()
                }
            }

            override fun onError() {
                Log.d("InfoWindow", "onError: An error occured")
            }
        })
    return contents

}

如何在 Google Maps with glide 的 infoWindow 中获取图像 - Android

How to get image in infoWindow on Google Maps with glide - Android

android

google-maps

firebase

infowindow

android-glide