Google Maps - beim Zoomen in der Mitte bleiben

Question

In Google Maps würde ich gerne die Mitte der Karte auf einer Markierung an meinem Standort behalten, wenn ich hinein- oder herauszoomen möchte. Es ist etwas, das Ingress macht, es ist egal, wo du doppelt tippst (oder doppelt klickst) oder wo du dich festklemmst, die Karte bleibt auf deinem Marker zentriert. So ist es möglich, ...

Das Beste, was ich mit jetzt kam ist:

google.maps.event.addListener(mymap, 'zoom_changed', function() { 
    mymap.setCenter({lat: myLoc.lat, lng: myLoc.lon}); 
}) 

Aber es ist bei weitem nicht perfekt, es ist einfach wieder in den Mittelpunkt der Karte, nachdem der Benutzer bereits gezoomt ...

Vielen Dank!

[EDIT] absolut nichts hilft in der API ref ... Oder woanders bin ich blind und verpasste es!

Answer 1

Ich habe keine Ahnung, warum Sie diese Frage sowohl als Javascript als auch als Android markiert haben. Unter Android müssen Sie Ihr MapView in eine andere Ansicht einbinden und eine Doppeltippbewegung in onInterceptTouchEvent erkennen, die Sie überschreiben können, wenn Ihre Klasse beispielsweise FrameLayout überschreiben kann. Dann true zurück, um zu verhindern, dass die Karte dieses Ereignis behandelt, und Sie behandeln es stattdessen.

Für vollständigen Code bitte siehe meine Antwort hier: https://stackoverflow.com/a/30118649/764897

Answer 2

Rein mit Javascript

• Zuerst Scroll-Zoom-Funktion standardmäßig von google map von Scrollrads = false, deaktivieren
• Als nächstes erstellen Sie benutzerdefinierte Scroll-Zoom-Funktion durch Mausereignis erfassen und Zoom-Level für Google Karte

einstellen

überprüfen Sie meinen Beispielcode: Fiddle URL: https://jsfiddle.net/vh3gqop0/5/

var map, i = 12; 
 
function initialize() { 
 
\t \t var myLatlng = new google.maps.LatLng(46.769603, 23.589957); 
 
\t \t var mapOptions = { 
 
\t \t \t center: myLatlng, 
 
\t \t \t zoom: i, 
 
\t \t \t scrollwheel: false, 
 
    \t \t disableDoubleClickZoom: true, 
 
\t \t \t mapTypeId: google.maps.MapTypeId.ROADMAP 
 
\t \t }; 
 
\t \t map = new google.maps.Map(document.getElementById("map_canvas"), 
 
\t \t \t mapOptions); 
 

 
\t \t var marker = new google.maps.Marker({ 
 
\t \t \t position: myLatlng, 
 
\t \t \t map: map, 
 
\t \t \t title: 'Any Title' 
 
\t \t }); 
 

 

 
\t } 
 

 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 
$(document).ready(function() { 
 
    $('#map_canvas').on("wheel", function(evt){ 
 
    // console.log(evt.originalEvent.deltaY); 
 
    \t \t if(evt.originalEvent.deltaY > 0){ 
 
     \t map.setZoom(++i); 
 
     }else { 
 
     \t map.setZoom(--i); 
 
     } 
 
    \t \t 
 
    }); 
 
});

#map_canvas{ 
 
    height:400px; 
 
    width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9d3jaUX6Qdr0Uzvq6fQXVmZ1PBuHEVAQ"></script> 
 
<div id="map_canvas"></div>

Answer 3

Leider Google Maps Api dieses Verhalten nicht bieten.

Das folgende Beispiel benötigt jQuery nicht und unterstützt das Doppelklicken und Mausscrollen. Sie können jedoch weitere Ereignisse hinzufügen, wenn Sie möchten.

Blick in Codepen

Disable:

• Doppel-clickin
• Scrolling
• Schwenk

dblclick und zoom_changed Ereignisse auf der Karte hinzufügen und eine mousewheel Veranstaltung auf die Segeltuch.

Ich habe den Code kommentiert, hoffentlich funktioniert das für Ihren Fall. Denken Sie daran, dass Sie die Mausradgeschwindigkeit für alle Browser und Geräte normalisieren müssen. Hammer.js ist dafür eine gute Bibliothek.

var map, zoom; 
 

 
function initialize() { 
 

 
    // The white house! 
 
    var myLatLng = new google.maps.LatLng(38.8977, -77.0365); 
 

 
    // Default zoom level 
 
    zoom = 17; 
 

 
    // Keep a reference for evens 
 
    var $map = document.getElementById("map"); 
 

 
    // Disable scrolling + double-click + dragging 
 
    map = new google.maps.Map($map, { 
 
    zoom: zoom, 
 
    center: myLatLng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    scrollwheel: false, 
 
    disableDoubleClickZoom: true, 
 
    //draggable: false 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: myLatLng, 
 
    map: map 
 
    }); 
 

 

 
    // EVENTS 
 

 
    // Double Click: event zoom by 1 
 
    map.addListener('dblclick', function(e) { 
 
    zoomHandler(e.latLng, 1); 
 
    }); 
 

 
    // Zoom changed: update current zoom level 
 
    map.addListener('zoom_changed', function(e) { 
 
    // Using a timeout because `getZoom()` does not return a promise. 
 
    setTimeout(function() { 
 
     zoom = map.getZoom(); 
 
    }, 50); 
 

 
    }); 
 

 
    // Dom event: On mousewheel 
 
    $map.addEventListener('mousewheel', wheelEvent, true); 
 
} 
 

 
// Mouse Scrolling event 
 
function wheelEvent(event) { 
 
    if (event.deltaY > 1) 
 
    zoomHandler(event, -1); 
 
    else 
 
    zoomHandler(event, 1); 
 
} 
 

 
// Zoom in/out 
 
function zoomHandler(event, zoomin) { 
 
    zoom += zoomin; 
 
    map.setZoom(zoom); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

#map { 
 
    width: 100%; 
 
    height: 240px; 
 
}

<div id="map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9d3jaUX6Qdr0Uzvq6fQXVmZ1PBuHEVAQ"></script>

Answer 4

sollten Sie versuchen, die center_changed Ereignis mit panTo Funktion.

google.maps.event.addListener(mymap, 'center_changed', function() { 
    mymap.panTo({lat: myLoc.lat, lng: myLoc.lon}); 
}) 

Sie können über panTo Funktion here ein Beispiel darüber here und Dokumentation. Becareful, sollte es alle ziehbare Sache durcheinander bringen.