Versetzen der Mitte des MapFragments für eine Animation, die sowohl die Breite/Länge des Ziels als auch die Zoomstufe bewegt

Ich habe eine Benutzeroberfläche, die ein MapFragment mit einer darüber gelegten transparenten Ansicht hat. Die Karte nimmt den gesamten Bildschirm ein, während die Ansicht nur das linke Drittel des Bildschirms ausmacht. Daher ist die standardmäßige “Mitte” der Karte deaktiviert. Wenn jemand auf eine Markierung klickt, möchte ich diese Markierung im vollständig sichtbaren Bereich des MapFragments zentrieren (nicht in der Mitte des MapFragments selbst).

Da dies mit Worten schwer zu beschreiben ist, lassen Sie mich ein paar Bilder verwenden. Angenommen, meine Benutzeroberfläche sieht so aus:

Wenn der Benutzer auf einen Marker klickt, möchte ich ihn zentrieren und Vergrößern Sie es, um es näher zu sehen. Ohne Anpassungen erhalten Sie Folgendes:

Was ich möchte, ist, dass der Marker zentriert ist, aber im Raum rechts, wie folgt:

Es ist sehr einfach, dieses Kunststück zu erreichen, wenn Sie die Zoomstufe nicht mithilfe der Kartenprojektion ändern:

// Offset the target latitude/longitude by preset x/y ints
LatLng target = new LatLng(latitude, longitude);
Projection projection = getMap().getProjection();
Point screenLocation = projection.toScreenLocation(target);
screenLocation.x += offsetX;
screenLocation.y += offsetY;
LatLng offsetTarget = projection.fromScreenLocation(screenLocation);

// Animate to the calculated lat/lng
getMap().animateCamera(CameraUpdateFactory.newLatLng(offsetTarget));

Wenn Sie jedoch gleichzeitig die Zoomstufe ändern, funktionieren die obigen Berechnungen nicht (da sich die Lat/Lng-Offsets bei verschiedenen Zoomstufen ändern).

Lassen Sie mich eine Liste der versuchten Korrekturen durchgehen:

• Zoomstufe schnell ändern, Berechnungen durchführen, zurück auf die ursprüngliche Kameraposition zoomen, dann animieren. Leider ist der plötzliche Kamerawechsel (auch wenn es nur für den Bruchteil einer Sekunde ist) leider sehr auffällig und ich möchte das Flimmern vermeiden.

• Übereinanderlegen von zwei MapFragments, wobei eines die Berechnungen durchführt, während das andere angezeigt wird. Ich habe festgestellt, dass MapFragments nicht wirklich dafür gebaut sind, übereinander geschichtet zu werden (auf diesem Weg gibt es unvermeidliche Fehler).

• Ändern von x/y der Bildschirmposition durch die Differenz im Quadrat der Zoomstufe. Theoretisch sollte das funktionieren, aber es ist immer ziemlich weit daneben (~ 0,1 Breitengrad/Längengrad, was ausreicht, um weit weg zu sein).

Gibt es eine Möglichkeit, das offsetTarget auch bei sich ändernder Zoomstufe zu berechnen?

Die neueste Version der Play-Services-Bibliothek fügt a setPadding() Funktion zu GoogleMap. Diese Polsterung projiziert alle Kamerabewegungen auf die versetzte Kartenmitte. Dieses Dokument erklärt weiter, wie sich die Kartenauffüllung verhält.

Die ursprünglich hier gestellte Frage kann nun einfach gelöst werden, indem eine linke Polsterung hinzugefügt wird, die der Breite des linken Layouts entspricht.

mMap.setPadding(leftPx, topPx, rightPx, bottomPx);

Ich habe eine Lösung gefunden, die wirklich zu dem Problem passt. Die Lösung besteht darin, die Mitte des Versatzes im erforderlichen Zoom aus dem Versatz des Originals zu berechnen und dann die Kamera der Karte zu animieren. Bewegen Sie dazu zuerst die Kamera der Karte auf den gewünschten Zoom, berechnen Sie den Offset für diese Zoomstufe und stellen Sie dann den ursprünglichen Zoom wieder her. Nach der Berechnung des neuen Zentrums können wir die Animation mit CameraUpdateFactory.newLatLngZoom erstellen.

Ich hoffe das hilft!

private void animateLatLngZoom(LatLng latlng, int reqZoom, int offsetX, int offsetY) {

    // Save current zoom
    float originalZoom = mMap.getCameraPosition().zoom;

    // Move temporarily camera zoom
    mMap.moveCamera(CameraUpdateFactory.zoomTo(reqZoom));

    Point pointInScreen = mMap.getProjection().toScreenLocation(latlng);

    Point newPoint = new Point();
    newPoint.x = pointInScreen.x + offsetX;
    newPoint.y = pointInScreen.y + offsetY;

    LatLng newCenterLatLng = mMap.getProjection().fromScreenLocation(newPoint);

    // Restore original zoom
    mMap.moveCamera(CameraUpdateFactory.zoomTo(originalZoom));

    // Animate a camera with new latlng center and required zoom.
    mMap.animateCamera(CameraUpdateFactory.newLatLngZoom(newCenterLatLng, reqZoom));

}

Bearbeiten: Der folgende Code ist für die veralteten v1-Karten. Diese SO-Antwort gibt an, wie ähnliche Aktionen in Version 2 ausgeführt werden: How to get Latitude/Longitude span in Google Map V2 for Android

Die wichtigsten Methoden, die Sie benötigen, sollten in Längen-/Breitengraden und Prozentsätzen statt in Pixeln funktionieren. Im Moment zoomt die Kartenansicht um die Mitte der Karte herum und bewegt sich dann, um die Stecknadel im exponierten Bereich neu zu zentrieren. Sie können die Breite nach dem Zoom in Grad abrufen, eine gewisse Bildschirmabweichung berücksichtigen und dann die Karte neu zentrieren. Hier ist ein Beispiel-Screenshot des folgenden Codes in Aktion nach dem Drücken von „+“: vor

nach
Haupt code:

@Override
            public void onZoom(boolean zoomIn) {
                // TODO Auto-generated method stub
                controller.setZoom(zoomIn ? map.getZoomLevel()+1 : map.getZoomLevel()-1);
                int bias = (int) (map.getLatitudeSpan()* 1.0/3.0); // a fraction of your choosing
                map.getLongitudeSpan();
                controller.animateTo(new GeoPoint(yourLocation.getLatitudeE6(),yourLocation.getLongitudeE6()-bias));

            }

Alle Codes:

    package com.example.testmapview;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.ItemizedOverlay;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapController;
import com.google.android.maps.MapView;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.view.Menu;
import android.widget.ZoomButtonsController;
import android.widget.ZoomButtonsController.OnZoomListener;

public class MainActivity extends MapActivity {
    MapView map;
    GeoPoint yourLocation;
    MapController controller;
    ZoomButtonsController zoomButtons;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        map=(MapView)findViewById(R.id.mapview);
        map.setBuiltInZoomControls(true);
        controller = map.getController();
        zoomButtons = map.getZoomButtonsController();

        zoomButtons.setOnZoomListener(new OnZoomListener(){

            @Override
            public void onVisibilityChanged(boolean arg0) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onZoom(boolean zoomIn) {
                // TODO Auto-generated method stub
                controller.setZoom(zoomIn ? map.getZoomLevel()+1 : map.getZoomLevel()-1);
                int bias = (int) (map.getLatitudeSpan()* 1.0/3.0); // a fraction of your choosing
                map.getLongitudeSpan();
                controller.animateTo(new GeoPoint(yourLocation.getLatitudeE6(),yourLocation.getLongitudeE6()-bias));

            }
        });

        //Dropping a pin, setting center
        Drawable marker=getResources().getDrawable(android.R.drawable.star_big_on);
        MyItemizedOverlay myItemizedOverlay = new MyItemizedOverlay(marker);
        map.getOverlays().add(myItemizedOverlay);
        yourLocation = new GeoPoint(0, 0);
        controller.setCenter(yourLocation);
        myItemizedOverlay.addItem(yourLocation, "myPoint1", "myPoint1");
        controller.setZoom(5);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

    @Override
    protected boolean isRouteDisplayed() {
        // TODO Auto-generated method stub
        return false;
    }

}

und ein Grundlayout:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.testmapview"
    android:versionCode="1"
    android:versionName="1.0" >
<meta-data
    android:name="com.google.android.maps.v2.API_KEY"
    android:value="YOURKEYHERE:)"/>
    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="16" />

<uses-permission android:name="android.permission.INTERNET" /> 
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <uses-library android:name="com.google.android.maps"/>

        <activity
            android:name="com.example.testmapview.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Wenn dies Ihre Frage nicht vollständig beantwortet, lassen Sie es mich bitte wissen, da dies ein lustiges Experiment zum Herumspielen war.

Das Projektionsmaterial der API ist nicht so nützlich, ich bin auf das gleiche Problem gestoßen und habe mein eigenes gerollt.

public class SphericalMercatorProjection {

    public static PointD latLngToWorldXY(LatLng latLng, double zoomLevel) {
        final double worldWidthPixels = toWorldWidthPixels(zoomLevel);
        final double x = latLng.longitude / 360 + .5;
        final double siny = Math.sin(Math.toRadians(latLng.latitude));
        final double y = 0.5 * Math.log((1 + siny) / (1 - siny)) / -(2 * Math.PI) + .5;
        return new PointD(x * worldWidthPixels, y * worldWidthPixels);
    }

    public static LatLng worldXYToLatLng(PointD point, double zoomLevel) {
        final double worldWidthPixels = toWorldWidthPixels(zoomLevel);
        final double x = point.x / worldWidthPixels - 0.5;
        final double lng = x * 360;

        double y = .5 - (point.y / worldWidthPixels);
        final double lat = 90 - Math.toDegrees(Math.atan(Math.exp(-y * 2 * Math.PI)) * 2);

        return new LatLng(lat, lng);
    }

    private static double toWorldWidthPixels(double zoomLevel) {
        return 256 * Math.pow(2, zoomLevel);
    }
}

Mit diesem Code können Sie die Karte um ein neues Ziel (dh nicht die Mitte) herum transformieren. Ich habe mich für ein Ankerpunktsystem entschieden, wobei (0,5, 0,5) der Standardwert ist und die Mitte des Bildschirms darstellt. (0,0) ist oben links und (1, 1) ist unten links.

private LatLng getOffsetLocation(LatLng location, double zoom) {
    Point size = getSize();
    PointD anchorOffset = new PointD(size.x * (0.5 - anchor.x), size.y * (0.5 - anchor.y));
    PointD screenCenterWorldXY = SphericalMercatorProjection.latLngToWorldXY(location, zoom);
    PointD newScreenCenterWorldXY = new PointD(screenCenterWorldXY.x + anchorOffset.x, screenCenterWorldXY.y + anchorOffset.y);
    newScreenCenterWorldXY.rotate(screenCenterWorldXY, cameraPosition.bearing);
    return SphericalMercatorProjection.worldXYToLatLng(newScreenCenterWorldXY, zoom);
}

Grundsätzlich verwenden Sie die Projektion, um die XY-Koordinaten der Welt zu erhalten, versetzen dann diesen Punkt und wandeln ihn wieder in eine LatLng um. Sie können dies dann an Ihre Karte weitergeben. PointD ist ein einfacher Typ, der x,y als Doubles enthält und auch rotiert.

public class PointD {

    public double x;
    public double y;

    public PointD(double x, double y) {
        this.x = x;
        this.y = y;
    }

    public void rotate(PointD origin, float angleDeg) {
        double rotationRadians = Math.toRadians(angleDeg);
        this.x -= origin.x;
        this.y -= origin.y;
        double rotatedX = this.x * Math.cos(rotationRadians) - this.y * Math.sin(rotationRadians);
        double rotatedY = this.x * Math.sin(rotationRadians) + this.y * Math.cos(rotationRadians);
        this.x = rotatedX;
        this.y = rotatedY;
        this.x += origin.x;
        this.y += origin.y;
    }
}

Beachten Sie, wenn Sie die Kartenpeilung und den Standort gleichzeitig aktualisieren, ist es wichtig, dass Sie die neue Peilung in getOffsetLocation verwenden.

Der einfache Weg wäre, Kameraanimationen zu verketten. Zuerst zoomen Sie normal mit auf Ihr Bild Nr. 2 animateCamera mit 3 Parametern und in CancellableCallback.onFinish Sie führen Ihre Projektionsberechnungen durch und animieren mit Ihrem Code, um das Zentrum zu ändern.

Ich glaube (habe es nicht getestet), das wird sehr gut aussehen, wenn Sie einige gute Werte für die Animationsdauer für beide Animationen festlegen. Vielleicht sollte die zweite Animation viel schneller sein als die erste. Auch wenn Ihre transparente, überlagerte Ansicht nicht sichtbar ist, wenn kein Marker ausgewählt ist, wäre es eine nette UX, sie während der zweiten Animation von links zu animieren.

Der schwierige Weg wäre, Ihre eigene sphärische Mercator-Projektion zu implementieren, wie sie die Maps API v2 intern verwendet. Wenn Sie nur den Längengrad-Offset benötigen, sollte das nicht so schwer sein. Wenn Ihre Benutzer die Peilung ändern können und Sie sie beim Zoomen nicht auf 0 zurücksetzen möchten, benötigen Sie auch den Breitengrad-Offset, und dies ist wahrscheinlich etwas komplexer zu implementieren.

Ich denke auch, dass es gut wäre, die Maps API v2-Funktionalität zu haben, mit der Sie eine Projektion für jede Kameraposition und nicht nur für die aktuelle erhalten können, also möchten Sie vielleicht hier eine Feature-Anfrage einreichen: http://code.google.com/p/gmaps-api-issues/issues/list?can=2&q=apitype=Android2. Sie können es einfach in Ihrem Code für den gewünschten Effekt verwenden.

Um einen Marker zu setzen, verwenden wir Overlays in Android, In overlay class==> on draw method place this thing

gebundenCenter (Marker);

und im Konstruktor auch so erwähnen:

    public xxxxxxOverlay(Drawable marker, ImageView dragImage, MapView map) {
            super(boundCenter(marker)); 
.
.
.
.
.
    }

Ich habe fast genau das gleiche Problem wie Sie (nur mein Versatz ist vertikal) und ich habe eine Lösung ausprobiert, die nicht wie erwartet funktioniert hat, aber Ihnen (uns) helfen könnte, eine bessere Lösung zu finden.

Was ich getan habe, war, die Kamera der Karte zu bewegen, um die Projektion auf das Ziel zu bringen, und den Offset dort anzuwenden.

Ich habe den Code in einer Utils-Klasse platziert und er sieht so aus:

public static CameraBuilder moveUsingProjection(GoogleMap map, CameraBuilder target, int verticalMapOffset) {
    CameraPosition oldPosition = map.getCameraPosition();
    map.moveCamera(target.build(map));
    CameraBuilder result = CameraBuilder.builder()
            .target(moveUsingProjection(map.getProjection(), map.getCameraPosition().target, verticalMapOffset))
            .zoom(map.getCameraPosition().zoom).tilt(map.getCameraPosition().tilt);
    map.moveCamera(CameraUpdateFactory.newCameraPosition(oldPosition));
    return result;
}

public static LatLng moveUsingProjection(Projection projection, LatLng latLng, int verticalMapOffset) {
    Point screenPoint = projection.toScreenLocation(latLng);
    screenPoint.y -= verticalMapOffset;
    return projection.fromScreenLocation(screenPoint);
}

Dann könnten Sie den von diesen Methoden zurückgegebenen CameraBuilder für die Animation anstelle des ursprünglichen (nicht versetzten) Ziels verwenden.

Es funktioniert (mehr oder weniger), hat aber zwei große Probleme:

• Die Karte flackert manchmal (das ist das größte Problem, weil es den Hack unbrauchbar macht)
• Es ist ein Hack, der vielleicht heute funktioniert und morgen vielleicht nicht mehr funktioniert (ich weiß mit Sicherheit, dass derselbe Algorithmus zum Beispiel auf iOS funktioniert).

Also habe ich mich nicht dafür entschieden, aber es brachte mich dazu, über eine Alternative nachzudenken: Wenn Sie eine identische Karte hätten, aber versteckt, könnten Sie diese Karte für Zwischenberechnungen verwenden und dann das Endergebnis auf der sichtbaren Karte verwenden.

Ich denke, diese Alternative würde funktionieren, aber es ist schrecklich, da Sie zwei identische Karten mit dem damit verbundenen Overhead für Sie und für das Gerät verwalten müssen.

Wie gesagt, ich habe keine endgültige Lösung dafür, aber vielleicht hilft das ein wenig.

Ich hoffe das hilft!