Google Maps JavaScript API - Automatiser le Niveau de Zoom?

Je travaille avec plusieurs marqueurs de carte. Actuellement, je utiliser map.fitBounds(bounds); dans mon JavaScript pour redimensionner la carte. limites contient plusieurs LatLng objets.

Ce que je fais mal? Parce qu'il fait un zoom trop loin 🙁

Source JavaScript

var geocoder, map;
$(document).ready(function(){
var coll_gmap = $(".gmap");
if ( coll_gmap.length != 0 )
{
//initiate map
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeControl: true,
navigationControl: true,
scaleControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var bounds = new google.maps.LatLngBounds();
//loop all addressen + insert into map
map = new google.maps.Map(coll_gmap[0], myOptions);
coll_gmap.each(function(index)
{
if (geocoder) {
geocoder.geocode( { 'address': $(this).attr("address")}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
bounds.extend(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map, 
position: results[0].geometry.location
});
} else {
console.log("Geocode was not successful for the following reason: " + status);
}//end if status
}); //end if geocoder.geocode
} //end if geocoder   
}) //end coll_gmap each
map.fitBounds(bounds);
}//end if coll_gmap length
/* console.log("Script created by NicoJuicy");*/   
}); //end onload

Source HTML

<div class="gmap" address="SomeAddress1" style="width:700px;height:350px"></div>
<div class="gmap" address="someAddress2"></div>

OriginalL'auteur NicoJuicy | 2010-07-14

La fitBounds() méthode devrait fonctionner. Cependant, notez qu'il garde toujours une marge interne sur la taille de la carte. Considérons l'exemple suivant:

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps fitBounds Padding</title> 
<script src="http://maps.google.com/maps/api/js?sensor=false" 
type="text/javascript"></script> 
</head> 
<body> 
<div id="map" style="width: 543px; height: 350px;"></div> 
<script type="text/javascript"> 
var map = new google.maps.Map(document.getElementById('map'), { 
mapTypeId: google.maps.MapTypeId.ROADMAP 
});
var bounds = new google.maps.LatLngBounds();
var points = [
new google.maps.LatLng(51.22, 4.40),
new google.maps.LatLng(50.94, 3.13)
];
//Extend bounds with each point
for (var i = 0; i < points.length; i++) {
bounds.extend(points[i]);
new google.maps.Marker({position: points[i], map: map});
}
//Apply fitBounds
map.fitBounds(bounds);  
//Draw the bounds rectangle on the map
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var boundingBox = new google.maps.Polyline({
path: [
ne, new google.maps.LatLng(ne.lat(), sw.lng()),
sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
],
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
boundingBox.setMap(map);
</script> 
</body> 
</html>

Capture d'écran à partir de l'exemple ci-dessus:

Google Maps JavaScript API - Automatiser le Niveau de Zoom?

Le rouge de la boîte englobante représente la LatLngBounds objet lorsqu'il est étendu avec les deux marqueurs. Notez que la carte de la toile est 543px large, et à noter également la marge de la marge à gauche et à droite de la boîte englobante.

Maintenant, si l'on réduit la largeur de la carte en toile de juste 1px, à l'aide de 542px, le fitBounds() méthode pop à un plus faible niveau de zoom:

Google Maps JavaScript API - Automatiser le Niveau de Zoom?

Belle réaction. Encore, je me demande, si vous remarquez ma capture d'écran, mes marqueurs ne sont pas dans le milieu, de plus en plus sur la moitié gauche. Donc, quelque chose d'autre a tort, aussi, le zoom n'est pas se "rapprocher" quand je ajuster la largeur...
Est-il possible de mettre à jour votre question avec un exemple complet qui reproduit votre problème? J'ai essayé de placer les marqueurs dans le même emplacement que le vôtre, et fitBounds() semble fonctionner beaucoup mieux dans mes captures d'écran.
J'ai mis à jour ma source 🙂
Première upvote à un autre Malteser!

OriginalL'auteur Daniel Vassallo

5

Je suis arrivé ici à l'aide d'une "Relative" lien à droite, et je pense que la réponse à votre problème est le même que pour la question précédente. :p

Le voir, la chose est que chaque fois que vous utilisez une fonction qui les casseroles/faire un zoom sur la carte, le script ignore nouveau, similaire, de la saisie jusqu'à ce qu'il est prêt pour cela à nouveau. Par conséquent, vous avez pour détecter cela, et seulement appel fitBounds() quand elle est acceptée. Essayez de remplacer votre
```
map.fitBounds(bounds);
```
avec
```
var listener = google.maps.event.addListener(map, "idle", function() { 
map.fitBounds(bounds);
google.maps.event.removeListener(listener); });
```
Bonne chance.

OriginalL'auteur LGT
1

J'ai trouvé la solution.

Au lieu de faire un seul
```
bounds.extend(myLatLng)
```
Chaque fois que vous ajoutez un myLatLng à vos limites, ces actions
```
bounds = map.getBounds();
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
```
Espère que cela aide quelqu'un!

OriginalL'auteur NicoJuicy

Suffit d'utiliser la setZoom fonction.

var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': zipcode }, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
map.setZoom(12);
}
else
{
alert(zipcode + " not found" + "\nstatus : " + status);
}
});

OriginalL'auteur VRC

//Custom zoom if you have just type of geocode response    
function get_node(node_name){
return document.getElementById(node_name);
}
var map_options = {};
var options = {
'zoom'      : LB_listing.zoomopt,
'minZoom'   : 3,
'center'    : latlng,
'mapTypeId' : google.maps.MapTypeId.ROADMAP
};
map_options.map = new google.maps.Map(get_node('googleMap'), options);
geocoder = new google.maps.Geocoder();
var address = $("#search_location").val();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
switch(results[0].types[0]){
case 'street_address':
map_options.zoomopt = 6;
break;
case 'route':
map_options.zoomopt = 14;
break;
case 'bus_station':
map_options.zoomopt = 14;
break;
case 'intersection':
map_options.zoomopt = 6;
break;
case 'political':
map_options.zoomopt = 14;
break;
case 'country':
map_options.zoomopt = 5;
break;
case 'administrative_area_level_1':
map_options.zoomopt = 6;
break;
case 'administrative_area_level_2':
map_options.zoomopt = 6;
break;
case 'administrative_area_level_3':
map_options.zoomopt = 6;
break;
case 'administrative_area_level_4':
map_options.zoomopt = 6;
break;
case 'administrative_area_level_5':
map_options.zoomopt = 6;
break;
case 'colloquial_area':
map_options.zoomopt = 6;
break;
case 'locality':
map_options.zoomopt = 11;
break;
case 'ward':
map_options.zoomopt = 6;
break;
case 'sublocality':
map_options.zoomopt = 6;
break;
case 'neighborhood':
map_options.zoomopt = 14;
break;
case 'premise':
map_options.zoomopt = 6;
break;
case 'subpremise':
map_options.zoomopt = 6;
break;
case 'postal_code':
map_options.zoomopt = 6;
break;
case 'natural_feature':
map_options.zoomopt = 6;
break;
case 'airport':
map_options.zoomopt = 6;
break;
case 'park':
map_options.zoomopt = 6;
break;
case 'point_of_interest':
map_options.zoomopt = 6;
break;
default:
map_options.zoomopt = 6;
break;
}
map_options.newLocation(results[0].geometry.location.lat(),results[0].geometry.location.lng());
}else {
$('#message_error').show().delay(3000).fadeOut(1000);
$('#message_error_msg').html("Geocode was not successful for the following reason: " + status);
}
});
map_options.newLocation = function(newLat,newLng) {
map_options.map.setCenter({
lat : newLat,
lng : newLng
});
map_options.map.setZoom(map_options.zoomopt);

}

Bienvenue DONC. Vos commentaires sont toujours les bienvenus, mais généralement une annotation est belle, elle aussi

OriginalL'auteur Asad Iftikhar

Vous devez vous connecter pour publier un commentaire.