将图像用作GoogleMap

Question

我从json得到纬度和经度,我想在地图上显示它们.我使用googleMap和Overlays等正常方式完成了它.但实际上我希望它像下面的图像.

我已经搜索并得到一些提示,比如在webView中显示地图并使用Javascript.但是没有找到任何教程或示例代码.

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

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

提前致谢.

Answer 1

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

我在谷歌地图上截了一张美国的截图。使用Right click -> What is here?菜单我找到了屏幕截图的地理范围。我还选择了国家边境周围的一些测试点。

这是一个简单的例子。自定义图像视图：

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 边界，而不是地图图片。

在您的活动中：

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);

结果：