Kartenfehler: Markierungen verschieben sich beim Wechsel des Blickwinkels überall hin. Behebung?

Question

Google Javascript Maps API 3.5

Das Grundproblem besteht darin, dass eine Markierung, die sich in der Draufsicht über einer festen Landmarke wie einem Hydranten befindet, nicht mehr über dem Hydranten angezeigt wird, wenn man in die 45-Grad-Ansicht wechselt. Und umgekehrt (Positionierung der Markierung in der 45-Grad-Ansicht und dann Wechsel zur Draufsicht).

Zur Vervielfältigung:

Siehe Muster hier: www.zingjet.com/maptest.html

-Erstellen einer einfachen Google Maps-Webseite mit einem verschiebbaren Marker. Mit anfänglicher Marker-/Kartenposition über einem Gebiet mit verfügbaren 45-Grad-Bildern: (versuchen Sie: 33.501472920248354, -82.01948559679795). Ich bin mir nicht sicher, ob dieses Problem für alle Gebiete auftritt, also versuchen Sie es zunächst mit diesem Punkt.

-Vergewissern Sie sich, dass Sie die maximale Vergrößerung gewählt haben und die Satellitenansicht aktiviert ist.

-Schalten Sie die 45-Grad-Bilder aus

-Positionierung des Markers über einem Fixpunkt (Ecke) usw.)

-Wechsel zur 45-Grad-Ansicht.

-Beachten Sie, dass die Position der Markierung verschoben wird.

-Versuchen Sie, die 45 Grad zu drehen und sehen Sie, wie der Marker s ursprünglichen Punkt auf dem Bild.

-Zurückschalten auf Overhead und die Markierung ist an der ursprünglichen Stelle.

Warum das ein Problem ist : Ich weiß nicht, worauf ich vertrauen kann. Welche Ansicht zeigt die genaue Position für diese Markierung? Es ist nicht möglich, Webseiten zu erstellen, die es ermöglichen, Markierungen in einer Ansicht zu platzieren und sie in einer anderen zu sehen. Große Unstimmigkeiten.

Answer 1

AKTUALISIERT 2

• Demo: http://bit.ly/IhpeBu

        var map, marker, overlay, latlng, zoom = 20;
        function initialize() {
            latlng = new google.maps.LatLng(33.501472920248354, -82.01948559679795);
            var myOptions = {
                zoom : zoom,
                center : latlng,
                tilt : 0,
                mapTypeId : google.maps.MapTypeId.SATELLITE
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            overlay = new google.maps.OverlayView();
            overlay.draw = function() {
            };
            overlay.onRemove = function() {
            };
            overlay.setMap(map);
            marker = new google.maps.Marker({
                position : latlng,
                map : map,
                draggable : true,
                title : "Hello World!"
            });

            google.maps.event.addListener(map, 'zoom_changed', function() {
                zoom = map.getZoom();
            });

            google.maps.event.addListener(map, 'dragend', function() {
                overlay.setMap(map);
            });

            google.maps.event.addListener(marker, 'dragend', function(evt) {
                var tilt = map.getTilt();
                latlng = new google.maps.LatLng(evt.latLng.lat(), evt.latLng.lng());
                if(tilt === 45) {
                    var projection = overlay.getProjection();
                    var latlng2pixel = projection.fromLatLngToContainerPixel(marker.getPosition());

                    var delta = 0;
                    switch(zoom) {
                        case 20:
                            delta = 45;
                            break;
                        case 19:
                            delta = 12;
                            break;
                        case 18:
                            delta = 4;
                            break;
                    }
                    latlng = projection.fromContainerPixelToLatLng(new google.maps.Point(latlng2pixel.x, (latlng2pixel.y + delta )));
                }
            });

            google.maps.event.addListener(map, 'tilt_changed', function() {
                var tilt = map.getTilt();
                if(tilt === 45) {
                    var delta = 0;
                    switch(zoom) {
                        case 20:
                            delta = 65;
                            break;
                        case 19:
                            delta = 32;
                            break;
                        case 18:
                            delta = 16;
                            break;
                    }
                    var projection = overlay.getProjection();
                    var latlng2pixel = projection.fromLatLngToContainerPixel(marker.getPosition());
                    var pixel2latlng = projection.fromContainerPixelToLatLng(new google.maps.Point(latlng2pixel.x, (latlng2pixel.y - delta )));
                    marker.setPosition(pixel2latlng);
                } else {
                    marker.setPosition(latlng);
                }
            });
        }

ANMERKUNGEN: der obige Code funktioniert wie folgt:

1. Wenden Sie ein benutzerdefiniertes Overlay an, um die; google.maps.MapCanvasProjection object doc
2. Ermitteln Sie die Position des Markers in Pixeln;
3. Hinzufügen zum y ( oben = lng ) die 45 Grad ( 45 Pixel bei Zoom 20 ) plus 20 Pixel der Höhe des Markierungssymbols (x bleibt immer unverändert, da die Gradänderung eine einfache optische Täuschung ist ;) );
4. Konvertieren Sie diese Pixelposition in eine gültige Breitengradposition;
5. beobachten, ob die tilt Methodenwechsel von 0 à 45 und umgekehrt und handeln entsprechend, indem sie die neuen Koordinaten festlegen.

Answer 2

Was Sie wahrscheinlich tun müssen, ist sie zu hacken. Soweit Google betroffen ist, liegt wahrscheinlich kein Fehler vor, und der Punkt auf der Karte "erscheint" an einer anderen Stelle, weil die 45-Grad-Ansicht die Perspektive auf der Karte ändert und damit auch, wie ein bestimmter Längen- und Breitengrad physisch auf der Karte erscheint (Ähnliches kann passieren, wenn der Zoom verändert wird). Was Sie tun müssen, ist herauszufinden, wie groß das Delta zwischen den Ansichten ist, und dann das "tilt_changed"-Ereignis zu haken und Ihren Marker entsprechend anzupassen. Eine gute und einfache Möglichkeit, das Delta herauszufinden, besteht darin, das "dblclick"-Ereignis zu haken, um sich über die Breite der Maus zu informieren:

google.maps.event.addDomListener(map, 'dblclick', function(MouseEvent){
        alert(MouseEvent.latLng.lat()+" "+MouseEvent.latLng.lng());
    }); 
// make sure you disable the maps default zoom on double click 
//or choose a different event or it will get annoying :)

und doppelklicken Sie dann auf den Bildschirm, wo die Markierung "sein sollte", und erstellen Sie eine Funktion, die die Markierung entsprechend anpasst. Theoretisch könnten Sie eine Funktion definieren, die für jeden Winkel funktioniert, so dass Sie nur die Position jedes Markers bei tilt_changed an die Funktion übergeben müssen. Lassen Sie mich wissen, ob dies ein guter Anfang für Sie ist :)