根据缩放级别在地图上缩放自定义标记

Question

I'm drawing a simple circle on my map by doing the following:

@Override
public void onMapReady(GoogleMap googleMap) {
    mMap = googleMap;

    try {
        boolean success = mMap.setMapStyle(MapStyleOptions.loadRawResourceStyle(getContext(), R.raw.style_json));
        if (!success) {
            Log.e("MapsActivityRaw", "Style parsing failed.");
        }

    } catch (Resources.NotFoundException e) {
        Log.e("MapsActivityRaw", "Can't find style.", e);
    }

    final LatLng myLatlng = new LatLng(-33.999564, 18.516763);
    mMap.moveCamera(CameraUpdateFactory.newLatLng(myLatlng));
    mMap.animateCamera( CameraUpdateFactory.zoomTo( 11.0f ) );

    mMap.setOnMapLoadedCallback(new GoogleMap.OnMapLoadedCallback() {
        public void onMapLoaded() {

            bar.setVisibility(View.GONE);
            drawCircle(myLatlng);

        }
    });

}

private void drawCircle(LatLng point){
    CircleOptions circleOptions = new CircleOptions();
    circleOptions.center(point);
    circleOptions.radius(500);
    circleOptions.strokeColor(Color.BLACK);
    circleOptions.fillColor(0x30ff0000);
    circleOptions.strokeWidth(2);
    mMap.addCircle(circleOptions);

}

This works perfectly, a circle is drawn to the map as expected.

The problem is that when I zoom in and out the size of the circle increases/decreases.

---

My Question:

I'm looking for a way to keep the size of the circle the same when zooming in and out.

Also..

I don't want to use marker clustering.

Answer 1

Essentially what you need to do is define what proportion of the screen for the circle radius to be.

In this example, it is always 10% of the width.

Given this, then compute the distance between longitudes of the screen and divide that distance by the desired proportion (radius).

I suspect you'll want different proportions depending on orientation.

This code snippet draws a circle whose radius is 10% of the width of the screen and then listens for camera movements (including zoom) to adjust the radius based on the new longitude bounds.

Circle c;

@Override
public void onMapReady(GoogleMap googleMap) {
    mMap = googleMap;

    mMap.getUiSettings().setZoomControlsEnabled(true);
    LatLng p = new LatLng(39.171755, -86.510632);

    LatLngBounds llb = mMap.getProjection().getVisibleRegion().latLngBounds;
    LatLng ne = llb.northeast;
    LatLng sw = llb.southwest;
    double d = SphericalUtil.computeDistanceBetween(ne,new LatLng(ne.latitude,sw.longitude));
    double r = (d/10);

    c = mMap.addCircle(new CircleOptions().center(p).radius(r).strokeColor(Color.BLUE));

    mMap.setOnCameraMoveListener(new GoogleMap.OnCameraMoveListener() {
        @Override
        public void onCameraMove() {
            LatLngBounds llb = mMap.getProjection().getVisibleRegion().latLngBounds;
            LatLng ne = llb.northeast;
            LatLng sw = llb.southwest;
            double d = SphericalUtil.computeDistanceBetween(ne,new LatLng(ne.latitude,sw.longitude));
            double r = (d/10);

            c.setRadius(r);
        }
    });


}

Also note that a circle is not a marker - title needs updating (may help searchers in the future.)