Google Maps Api - Marker Icon in Streetview bei jedem Zoomlevel auf gleicher Höhe halten

[ebody]

Hallo,

in einem Streetview Panorama setze ich einen Marker.

let Marker = new google.maps.Marker({
 position: {lat: -31.563910, lng: 147.154312},
 map: map,
 animation: google.maps.Animation.DROP,
 icon:{
    url: 'icon.svg',          
    size: new google.maps.Size(100, 100),         
    scaledSize: new google.maps.Size(100, 100),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(50, 100)         
 }
}); 

Mit dieser Zeile verschiebe ich den Marker in der x und y Achse: anchor: new google.maps.Point(50, 100)

Ich möchte den Marker immer auf einer bestimmten Höhe zeigen. In den Streetview Eigenschaften, lege ich das Zoomlevel erstmal fest. z.B. 12. und kann den y Wert in dieser Zeile entsprechend anpassen, damit der Marker die gewünschte Höhe hat: anchor: new google.maps.Point(x, y)

Wenn man jetzt rein oder rauszoomt verrutscht der Marker in seiner y-Achse und hat nicht mehr die gewünschte Höhe. Es sollte so wie in diesem Beispiel aussehen. Egal welches Zoomlevel, der Marker bleibt immer in der gleichen Höhe.

Ich habe ein Script angefangen, um den Y-Wert ans neue Zoomlevel anzupassen, aber das funktioniert auch nicht so wirklich:

google.maps.event.addListener(map.getStreetView(), 'zoom_changed', function() {
    
    let newZoom = parseFloat(map.getStreetView().getZoom());

    let zoomDiff = newZoom - 1 ;

    zoomDiff = zoomDiff*15;

    if (typeof panoMarkerArr !== 'undefined' && panoMarkerArr.length > 0) {
        let y = panoMarkerArr[panoMarkerArr.length-1].icon.anchor.y + zoomDiff;
        panoMarkerArr[panoMarkerArr.length-1].icon.anchor = new google.maps.Point(50, y);
    }

});

Gibt es evtl. eine Eigenschaft dafür? Für leaflet gibt es glaube ich scrollWheelZoom und bewirkt das, was ich brauche (bin aber nicht 100% sicher).

Oder wie kann man es sonst hinbekommen, dass der Marker bei jedem Zoomlevel seine Höhe beibehält?

Gruß ebody

[henman]

Servus ebody,

ich nehme an, dass das zoom-changed-Event einfach zu oft gefeuert wird und die Verarbeitung nicht hinterherkommt.

Vor Monaten habe ich mal ein ES6-Tutorial gemacht, in dem unter anderem eine Art Wrapper für Funktionsaufrufe gab. Dieser hat glaub ich dafür gesorgt, nicht jeden Call zu squanchen*, sondern der Funktion quasi etwas Luft zu lassen. Ich komm ums Verrecken nicht auf den Namen, weder mit Google, Bing oder DuckDuckGo.

Jedenfalls könnte dir das helfen, weil dein Script bzw. das Event-Handling dann entspannter arbeiten kann.

SELFHTML, do your thing.

ciao

* - pfui, nicht das, was du denkst, Ferkel

[Rolf B]

Hallo henman,

squanchen

Welches Wort wird bei Urban Dictionary eigentlich nicht als Ferkelei definiert?

Aber ich bin sicher, dass es für das Dämpfen zu häufig feuernder Events noch ein anderes Wort gibt. Ich komm nur grad nicht drauf.

Rolf