android - 将图像用作 GoogleMap

Question

我从 json 获取纬度和经度，我想在 map 上显示它们。我已经使用正常方式完成了它，比如使用 googleMap 和 Overlays。但实际上我希望它像下图一样。

我已经搜索并获得了一些提示，例如在 webView 中显示 map 和使用 Javascript。但找不到任何教程或示例代码。

它是静态图像，不会放大或缩小。只是我想把位置坐标放在图像上。

所以我的问题是，是否可以将图像作为 gooleMap？

提前致谢。

Answer 1

我建议您覆盖 ImageView#onDraw() 并在图像顶部绘制位置点。主要任务是将坐标从地理空间转换到 ImageView 空间。因此，您需要知道 map 图像在地理空间中的边界。

我在 Google map 中截取了美国的截图。使用 Right click -> What is here? 菜单我找到了屏幕截图的地理边界。我还选择了一些国家边界附近的测试点。

这是一个简单的例子。自定义 ImageView :

public class MapImageView extends ImageView {
    private float latitudeTop, latitudeBottom, longitudeRight, longitudeLeft;
    private List<Float> points = new ArrayList<Float>();
    private Paint pointPaint;
    private Matrix pointMatrix = new Matrix();

    public MapImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        pointPaint = new Paint();
        pointPaint.setAntiAlias(true);
        pointPaint.setStrokeCap(Cap.ROUND);
        pointPaint.setColor(Color.RED);
        pointPaint.setStrokeWidth(8.0f);
    }

    public void setBounds(float latitudeTop, float latitudeBottom, float longitudeLeft, float longitudeRight) {
        this.latitudeTop = latitudeTop;
        this.latitudeBottom = latitudeBottom;
        this.longitudeLeft = longitudeLeft;
        this.longitudeRight = longitudeRight;
    }

    public void addPoint(float latitude, float longitude) {
        points.add(longitude);
        points.add(latitude);
        invalidate();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        pointMatrix.reset();
        pointMatrix.postTranslate(-longitudeLeft, -latitudeTop);
        pointMatrix.postScale(
                getMeasuredWidth()/(longitudeRight-longitudeLeft), 
                getMeasuredHeight()/(latitudeBottom-latitudeTop));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawPoints(mapPoints(), pointPaint);
    }

    private float[] mapPoints() {
        float[] pts = new float[points.size()];

        for (int i = 0; i < points.size(); i++) {
            pts[i] = points.get(i);
        }

        pointMatrix.mapPoints(pts);

        return pts;
    }
}

在你的布局中:

<com.example.stackoverflow.MapImageView
    android:id="@+id/img_map"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/map"
    android:scaleType="fitXY" />

请注意 scaleType="fitXY" 很重要，因为坐标映射到 ImageView 边界，而不是 map 图片。

在您的 Activity 中:

MapImageView mapView = (MapImageView)findViewById(R.id.img_map);
mapView.setBounds(52.734778f, 19.979026f, -130.78125f, -62.402344f);

mapView.addPoint(42.163403f,-70.839844f);
mapView.addPoint(42.163403f,-70.839844f);

结果: