Google Maps API: Erzwingen des Zooms an einen bestimmten Ort

Question

Ich bin ziemlich neu in der Google Maps API und habe mich gefragt, ob es eine Möglichkeit gibt, den Zoom an einen bestimmten Ort zu erzwingen, zum Beispiel: die USA.

Was ich suche ist eine Art zu simulieren, die Art von Zoom in Wirkung der Maus Scrollrad, wenn der Cursor in den USA ist, wenn Sie mit dem Scrollrad Rad, wird die Mitte in Richtung zu bewegen der Mauszeiger.

Ich habe versucht, das 'zoom_changed' Ereignis und das Ändern der Mitte dynamisch, aber da es nicht auf einem Desktop (Gerätemodus) ausgeführt wird, wird das Ereignis nur am Ende ausgelöst (source).

Hier ist mein Code:

var map; 
var centerUS; 
var currentCenter; 
var currentZoom; 

function initMap() { 
    //define Map 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: 0, lng: 0}, 
     zoom: 3, 
     disableDefaultUI: true 
    }); 

    //limit the zoom 
    map.setOptions({ minZoom: 3, maxZoom: 10 }); 

    //initialization of variables 
    currentZoom = map.getZoom(); 
    currentCenter = map.getCenter(); 
    centerUS = new google.maps.LatLng(40, -100); 

    //add the listener for zooming in 
    map.addListener('zoom_changed', function() { 
     zoomInTheUS(); 
    }); 
} 

function zoomInTheUS() { 

    //get new values 
    var newZoom = map.getZoom(); 
    currentCenter = map.getCenter(); 

    //if the user is zooming in 
    if (newZoom > currentZoom) { 

     //difference between the current center and the center of the US 
     var changeLat = centerUS.lat() - currentCenter.lat(); 
     var changeLng = centerUS.lng() - currentCenter.lng(); 

     //approach the center of the US by a factor of 10% of the distance 
     var newLat = currentCenter.lat() + changeLat * 0.1; 
     var newLng = currentCenter.lng() + changeLng * 0.1; 

     //define new center and pan to it 
     var newCenter = new google.maps.LatLng(newLat, newLng); 
     map.panTo(newCenter); 
    } 

    //actualize the value of currentZoom 
    currentZoom = newZoom; 
} 

Ich versuchte es während der ‚drag‘ Ereignis zu tun, weil es immer wieder ausgelöst wird, aber es funktioniert nicht. Ich denke, das liegt daran, dass das Ereignis sehr schnell ausgelöst wird und die Variablen newZoom und currentZoom fast immer den gleichen Wert haben. Oder vielleicht wird im Gerätemodus die Zoom-Variable von Google Maps API am Ende eines Ereignisses aktualisiert. Ich nehme nur an, ich weiß es nicht.

Gibt es eine Möglichkeit zu erreichen, was ich will? Ich dachte daran, das Schwenken zu deaktivieren, wenn 2 Finger erkannt werden oder vielleicht vom Gerätemodus in den Nicht-Gerätemodus wechseln, aber ich habe nichts darüber gefunden.

Vielen Dank im Voraus.

Answer 1

Sie könnten zuerst versuchen, Ihren eigenen Standort zu finden und dann automatisch auf diesen Standort zoomen. https://stackoverflow.com/a/20930874/7707749

Ich habe hier ein Beispiel, wie Sie in die Lage vergrößern können Sie wollen es vergrößern für:

function getPlaces(query) { 
 
\t service = new google.maps.places.PlacesService(
 
\t document.getElementById('attributions') //attributions-container 
 
\t); 
 

 
\t //send a query 
 
\t service.textSearch({query:query}, function(results, status) { 
 
\t \t if (status == google.maps.places.PlacesServiceStatus.OK) { 
 
\t \t \t for (var i = 0; i < results.length; i++) { 
 
     
 
\t \t \t \t addMapMarker(results[i], i); 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t map.fitBounds(mapPointsBounds); 
 
\t \t } 
 
\t }); 
 
} 
 

 

 
function addMapMarker(markerInfo, i) { 
 

 
\t var infowindow = new google.maps.InfoWindow(), marker; 
 
\t var service = new google.maps.places.PlacesService(map); 
 
\t 
 
\t var marker; 
 
\t 
 
\t //this is where the marker is created with position and animation 
 
\t marker = new google.maps.Marker({ 
 
\t \t animation: google.maps.Animation.DROP, 
 
\t \t position: markerInfo.geometry.location, 
 
\t \t map: map, 
 
      markerInfo: markerInfo 
 
\t }); 
 
\t 
 
\t allMarkers.push(marker); //keeping all markers in an array  
 
\t mapPointsBounds.extend(markerInfo.geometry.location); //extend bounds to contain this marker 
 
\t 
 
\t google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
\t \t return function() { 
 
\t \t \t infowindow.setContent('<div>This is marker:' + marker + '</div>'); 
 
\t \t \t infowindow.open(map, marker); 
 
\t \t } 
 
\t })(marker, i)); 
 
}

#map { 
 
\t height: 100%; 
 
} 
 

 
html, body { 
 
\t height: 100%; 
 
\t margin: 0; 
 
\t padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 
<img src="http://developers.google.com/places/documentation/images/powered-by-google-on-white.png"/> 
 

 
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" onchange="initMap(this.value)"/> 
 
\t \t 
 
<ul id="results"></ul> 
 

 
<div id="attributions" style="background:#f1f1f1"> You'll see here the attributions when there are any </div> 
 
\t \t 
 
<div id="map"></div> 
 

 

 
<script src="https://maps.googleapis.com/maps/api/js?&libraries=places" async defer></script> 
 
<script> 
 
    var startLatLng, //change this to some value near to where the map will end up 
 
\t allMarkers = [], //keep a global copy of your markers 
 
\t mapPointsBounds = [], //map bounds of all markers 
 
\t map; //copy of the map 
 

 
\t //Google will call this when it's ready, it's a query string in the script tag above `&callback=initMap`: 
 
    function initMap(query) { 
 
     startLatLng = new google.maps.LatLng([0, 0]); 
 
\t mapPointsBounds = new google.maps.LatLngBounds(); 
 

 
\t map = new google.maps.Map(document.getElementById('map'), { 
 
     center: startLatLng, 
 
\t \t zoom: 13 
 
\t }); 
 
\t \t \t \t 
 
\t getPlaces(query); 
 
    } 
 
</script>