How to add a Marker/Pin on an ImageView Android?

问题

I would like to ask on how to implement or add a marker on an imageView. I rendered an SVG using svglib and used a customImageView so that I can zoom and pan around the image.

here is my code on how i used my customImageView

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        SVG svg;
        switch (mNum) {

        case 1:
            svg = SVGParser.getSVGFromResource(getResources(), R.raw.t1);
            break;
        case 2:
            svg = SVGParser.getSVGFromResource(getResources(), R.raw.t2);
            break;
        case 3:
            svg = SVGParser.getSVGFromResource(getResources(), R.raw.t3);
            break;
        case 4:
            svg = SVGParser.getSVGFromResource(getResources(), R.raw.t4);
            break;
        default:
            svg = SVGParser.getSVGFromResource(getResources(),
                    R.raw.android);

        }

        View v = inflater.inflate(R.layout.hello_world, container, false);
        View tv = v.findViewById(R.id.text);
        imageView = (GestureImageView) v.findViewById(R.id.imageView1);
        imageView.setStrict(false);
        imageView.setStartingScale(lastScale);
        // if(lastXPosition!=0 && lastYPosition!=0)
        imageView.setStartingPosition(lastXPosition, lastYPosition);
        // Log.i("tag",
        // "lastXPosition" + lastXPosition);
        // Log.i("tag",
        // "lastYPosition" + lastYPosition);
        // Log.i("tag",
        // "lastScale" + lastScale);
        // imageView.setRotation(45);
        // imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        if (Build.VERSION.SDK_INT > 15)
            imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        imageView.setImageDrawable(svg.createPictureDrawable());
        ((TextView) tv).setText("Floor number: " + mNum);
        imageView.setBackgroundColor(Color.WHITE);
        // tv.setBackgroundDrawable(getResources().getDrawable(
        // android.R.drawable.gallery_thumb));
        // imageView.setScaleType(ScaleType.CENTER);
        // ((GestureImageView)imageView).setScale(x);
        return v;
    }

Now I would like to add a pin just like the image below...

_{(source: modality.com)}

But my problem is that when I pan around the marker I added is not bonded with the image SVG thus left behind at a certain position when panning...

Here's my code... NOTE: Not yet final... I'm still looking for a way to get this working and I am using a zoomed in imageview as a map...

@Override
protected void onDraw(Canvas canvas) {

    if (layout) {
        if (drawable != null && !isRecycled()) {
            canvas.save();

            float adjustedScale = scale * scaleAdjust;

            canvas.translate(x, y);

            if (rotation != 0.0f) {
                canvas.rotate(rotation);
            }

            if (adjustedScale != 1.0f) {
                canvas.scale(adjustedScale, adjustedScale);
            }

            drawable.draw(canvas);

            canvas.restore();
        }

        if (drawLock.availablePermits() <= 0) {
            drawLock.release();
        }
    }

    // ---add the marker---
    Bitmap marker = BitmapFactory.decodeResource(getResources(),
            R.drawable.search_marker_icon);
    canvas.drawBitmap(marker, 40, 40, null);
    Paint mPaint = new Paint();
    mPaint.setColor(Color.RED);
    canvas.drawCircle(60, 60, 5, mPaint);
    super.onDraw(canvas);
}

Thanks.... I'm new to android :) hope you can help me....

回答1:

This is a nice library for displaying images, which supports zooming/panning and adding pins over the image https://github.com/davemorrissey/subsampling-scale-image-view

回答2:

 drawable.draw(canvas);

// ---add the marker---
Bitmap marker = BitmapFactory.decodeResource(getResources(),
        R.drawable.search_marker_icon);
canvas.drawBitmap(marker, 40, 40, null);
Paint mPaint = new Paint();
mPaint.setColor(Color.RED);
canvas.drawCircle(60, 60, 5, mPaint);


        canvas.restore();
    }

    if (drawLock.availablePermits() <= 0) {
        drawLock.release();
    }
}
 super.onDraw(canvas);
}

You need to do this before canvas.restore..... :D got this solution last year...... thnx for the help guys.... my app is almost done :)

回答3:

An implementation of an HTML map like element in an Android View:

Supports images as drawable or bitmap in layout
Allows for a list of area tags in xml
Enables use of cut and paste HTML area tags to a resource xml (ie, the ability to take an HTML map - and image and use it with minimal editing)
Supports panning if the image is larger than the device screen
Supports pinch-zoom
Supports callbacks when an area is tapped.
Supports showing annotations as bubble text and provide callback if the bubble is tapped

try this link you will find your solution https://github.com/catchthecows/AndroidImageMap

来源：https://stackoverflow.com/questions/13679189/how-to-add-a-marker-pin-on-an-imageview-android

标签

java

android

imageview

android-canvas

marker