【问题标题】:How can I draw a static target circle on Google Maps?如何在 Google 地图上绘制静态目标圆?
【发布时间】:2016-06-14 16:56:23
【问题描述】:

我一直在研究在谷歌地图上为静态半径绘制一个圆,我遇到的所有答案都描述了与纬度坐标相关的绘制标记和圆。

我需要的是:

这个圆圈和标记漂浮在 Google 地图片段上方,即:当您平移和缩放时,它保持静止。这是棘手的部分:我希望能够获取地图中的覆盖区域进行处理(例如:中心标记的纬度、经度和圆的半径,具体取决于放大地图)。

我怎样才能做到这一点?提前致谢。

【问题讨论】:

  • Javascript API 还是 Android API?
  • 如果您想在覆盖区域中获取数据,我认为您的要求有点复杂。 This ticket 或许可以为您提供关于浮圈(自定义叠加)的解决方案。
  • @MrUpsidown AndroidAPI
  • @adjuremods 让我看看。谢谢。 =)

标签: android google-maps


【解决方案1】:

您可以创建自定义View 来绘制圆圈。我的例子基于Draw transparent circle filled outside

Here你可以找到关于如何创建自定义视图的教程。

在我的示例中,我创建了一个自定义 RadarOverlayView,并带有一个用于计算面积的 radius 参数。

我的自定义视图代码:

public class RadarOverlayView extends LinearLayout {
    private Bitmap windowFrame;
    private float radius = 0f;
    private int centerX = 0;
    private int centerY = 0;

    public RadarOverlayView(Context context) {
        super(context);
    }

    public RadarOverlayView(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray a = context.getTheme().obtainStyledAttributes(
                attrs, R.styleable.RadarOverlayView, 0, 0);

        try {
            radius = a.getDimension(R.styleable.RadarOverlayView_radius, 0f);
        } finally {
            a.recycle();
        }
    }

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

        if (windowFrame == null) {
            createWindowFrame();
        }
        canvas.drawBitmap(windowFrame, 0, 0, null);
    }

    @Override
    public boolean isEnabled() {
        return false;
    }

    @Override
    public boolean isClickable() {
        return false;
    }

    protected void createWindowFrame() {
        windowFrame = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
        Canvas osCanvas = new Canvas(windowFrame);

        centerX = getWidth() / 2;
        centerY = getHeight() / 2;

        if (radius > 0) {
            Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

            // Draw the circunference
            paint.setStyle(Paint.Style.STROKE);
            paint.setColor(Color.RED);
            paint.setAlpha(200);
            paint.setStrokeWidth(5);
            osCanvas.drawCircle(centerX, centerY, radius, paint);

            // Draw the circle
            paint.setStyle(Paint.Style.FILL);
            paint.setColor(Color.RED);
            paint.setAlpha(100);
            osCanvas.drawCircle(centerX, centerY, radius, paint);

            // Draw the center icon
            paint.setAlpha(255);
            Bitmap centerBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
            osCanvas.drawBitmap(centerBitmap, centerX - centerBitmap.getWidth() / 2,
                    centerY - centerBitmap.getHeight() / 2,
                    paint);
        }
    }

    @Override
    public boolean isInEditMode() {
        return true;
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        windowFrame = null;
    }

    public float getRadius() {
        return radius;
    }

    public int getCenterX() {
        return centerX;
    }

    public int getCenterY() {
        return centerY;
    }
}

我的 attrs.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="RadarOverlayView">
        <attr name="radius" format="dimension" />
    </declare-styleable>
</resources>

我的 activity_maps.xml 布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
    <fragment
        android:id="@+id/map"
        android:name="myPackage.MySupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MapsActivity"/>
    <myPackage.RadarOverlayView
        android:id="@+id/radar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        app:radius="150dp" />
</RelativeLayout>

我的活动:

public class MapsActivity extends FragmentActivity implements GoogleMap.OnCameraChangeListener {
    private GoogleMap mMap;
    private RadarOverlayView radarView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_maps);
        radarView = (RadarOverlayView) findViewById(R.id.radar);
        setUpMapIfNeeded();
    }

    @Override
    protected void onResume() {
        super.onResume();
        setUpMapIfNeeded();
    }

    private void setUpMapIfNeeded() {
        if (mMap == null) {
            mMap = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map))
                    .getMap();
            if (mMap != null) {
                setUpMap();
            }
        }
    }

    private void setUpMap() {
        mMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);
        mMap.getUiSettings().setAllGesturesEnabled(true);
        mMap.getUiSettings().setZoomControlsEnabled(true);

        mMap.setOnCameraChangeListener(this);
    }

    @Override
    public void onCameraChange(final CameraPosition cameraPosition) {
        // Compute the area of the circle each time the camera changes

        LatLng center = mMap.getProjection().fromScreenLocation(
                new Point(radarView.getCenterX(), radarView.getCenterY()));
        LatLng right = mMap.getProjection().fromScreenLocation(
                new Point(radarView.getCenterX() + Math.round(radarView.getRadius()),
                        radarView.getCenterY()));

        Location locationCenter = new Location("center");
        locationCenter.setLatitude(center.latitude);
        locationCenter.setLongitude(center.longitude);

        Location locationRight = new Location("right");
        locationRight.setLatitude(right.latitude);
        locationRight.setLongitude(right.longitude);

        double geoRadius = locationCenter.distanceTo(locationRight);
        double geoArea = Math.PI * Math.pow(geoRadius, 2);

        // Uncomment to inspect the difference between
        // RadarOverlayView circle and geographic circle:
        // mMap.clear();
        // Circle circle = mMap.addCircle(new CircleOptions()
        //        .center(cameraPosition.target)
        //        .radius(geoRadius)
        //        .strokeColor(Color.GREEN)
        //        .fillColor(Color.BLUE));

        Toast.makeText(this, "Area: " + geoArea, Toast.LENGTH_SHORT).show();
    }
}

结果如下所示,并显示一个Toast,每次相机变化时,圆圈覆盖的区域:

限制:

该示例在View 中绘制了一个完美的圆圈,但根据缩放级别,该圆圈不能保证在地理上是准确的。

您可以看到,在高缩放级别下,如果您取消注释 mMap.addCircle 代码onCameraChange方法:

这种差异是由地图 (WGS84) 的投影引起的,在高缩放级别时会很大,而在低缩放级别时会减小:

【讨论】:

  • 完美!这就是我一直在寻找的。关于限制:我将其用作某些数据的图形表示,因此具有该区域的近似值就足够了。感谢您抽出宝贵时间逐步清楚地解释解决方案。 =)
  • 很高兴为您提供帮助 :) 如果此解决方案完全回答了您的问题,您可以考虑将其标记为已接受的答案。
  • 我一测试就会做。 ??
  • 这就像一场梦。先生,你应该得到一块饼干! ?
  • 好吃! ;) 感谢您的反馈!
猜你喜欢
  • 2012-07-23
  • 2013-12-23
  • 1970-01-01
  • 1970-01-01
  • 2019-07-07
  • 2018-08-09
  • 2013-07-06
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多