百度地图绘制Marker图标模糊失真解决

前言

在开发百度地图过程中有些同学，发现绘制的百度地图Marker图标模模糊糊，看不清楚，我记得我百度的时候有一种做法是将图标四周留下透明留白，但是实际使用的话应该效果不咋地，但是共享单车的图标是明明白白清清楚楚不失真，接下来就看我这两种解决方式吧。

• 准备一张比目标图标分辨率大的图标(这个其实归根结底还是分辨率+缩放问题)

• 第一种：通过百度Api自身的缩放

var ooA = MarkerOptions()
          .position(LatLng(mlatitude, mlongitude))
          .icon(bdMine)
          .scaleX(0.2f)
          .scaleY(0.3f)
          .zIndex(9)
mBaiduMap!!.addOverlay(ooA )

image.png

通过这张图可以看出我们绘制的Marker其实就是添加一个Overlay，本质上配置的就是一个MarkerOptions,在addOverlay时会给你new一个Marker并且把options里面的所有属性值赋给它。话不多说，用此种方法会有一个问题，就是你将Marker图标缩小后，在点击此Marker附近时也会触发Marker点击事件，但是从UI上发现点击时没有触碰到这个Marker，

image.png

这里其实是控件绘制上视图错觉，就像逐帧动画和属性动画的区别，表面上看控件确实缩小了，但其实只是图片像素显示区域缩小了， 生成的控件大小并未被缩小，看了源码懵懵懂懂，自己大胆猜测为Marker控件凭借初始的图像大小生成了控件的大小，后根据缩放时配置的scaleX、scaleY值将图片显示像素部分给缩放，就导致这个问题，所以此种方式可以增大控件点击区域，但是缩小值不宜过大，且Marker密度不宜过大，实用性不高。

• 第二种：第一种的改进版，提前改变图片大小达到精准缩放

在第一种中我猜想Marker控件是根据图片的宽高生成的控件大小，那么将传入前将图片大小直接给缩小应该就能成，根据这个思想开始写代码，结果成了，既改变了Marker图标大小，又把模糊的病治好了，缩小代码如下。

val bdMine = BitmapDescriptorFactory.fromBitmap(ImageUtil.zoomImg(BitmapFactory
            .decodeResource(MrAPP.getContext().resources, R.drawable.ic_mine_show)
            ,Constant.MARKER_SCALE,Constant.MARKER_SCALE))

public final static float MARKER_SCALE=0.2f;

ImageUtil类

public class ImageUtil {
    public static Bitmap zoomImg(Bitmap bm, int newWidth, int newHeight) {
        int width = bm.getWidth();
        int height = bm.getHeight();
        float scaleWidth = ((float) newWidth) / width;
        float scaleHeight = ((float) newHeight) / height;
        //取得想要缩放的matrix参数
        Matrix matrix = new Matrix();
        matrix.postScale(scaleWidth, scaleHeight);
        return Bitmap.createBitmap(bm, 0, 0, width, height, matrix, true);
    }

    public static Bitmap zoomImg(Bitmap bm) {
        int width = bm.getWidth();
        int height = bm.getHeight();
        float scaleWidth = ((float) width) / width;
        float scaleHeight = ((float) height) / height;
        Matrix matrix = new Matrix();
        matrix.postScale(scaleWidth, scaleHeight);
        return Bitmap.createBitmap(bm, 0, 0, width, height, matrix, true);
    }
    
    public static Bitmap zoomImg(Bitmap bm,float scaleX,float scaleY) {
        int width = bm.getWidth();
        int height = bm.getHeight();
        Matrix matrix = new Matrix();
        matrix.postScale(scaleX, scaleY);
        return Bitmap.createBitmap(bm, 0, 0, width, height, matrix, true);
    }
}