javascript - puntos - Cómo establecer el nivel de zoom en el mapa de google
marcar puntos en google maps api (5)
Aquí está el código que he escrito para agregar un marcador al mapa de Google proporcionando latitud y longitud. El problema es que obtengo un mapa de google muy ampliado. Intenté configurar el nivel de zoom en 1, pero esto no tiene efecto en el mapa con un zoom muy alto.
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",new google.maps.Size(32, 32), new google.maps.Point(0, 0),new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
icon: icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});
addMarker(27.703402,85.311668,''New Road'');
center = bounds.getCenter();
map.fitBounds(bounds);
}
</script>
</head>
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
</body>
</html>
¿Cómo puedo disminuir el nivel de zoom para este caso?
Aquí hay una función que uso:
var map = new google.maps.Map(document.getElementById(''map''), {
center: new google.maps.LatLng(52.2, 5),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 7
});
function zoomTo(level) {
google.maps.event.addListener(map, ''zoom_changed'', function () {
zoomChangeBoundsListener = google.maps.event.addListener(map, ''bounds_changed'', function (event) {
if (this.getZoom() > level && this.initialZoom == true) {
this.setZoom(level);
this.initialZoom = false;
}
google.maps.event.removeListener(zoomChangeBoundsListener);
});
});
}
Lo que estás buscando son las escalas para cada nivel de zoom. Use estos:
20: 1128.497220
19: 2256.994440
18: 4513.988880
17: 9027.977761
16: 18055.955520
15: 36111.911040
14: 72223.822090
13: 144447.644200
12: 288895.288400
11: 577790.576700
10: 1155581.153000
9: 2311162.307000
8: 4622324.614000
7: 9244649.227000
6: 18489298.450000
5: 36978596.910000
4: 73957193.820000
3: 147914387.600000
2: 295828775.300000
1: 591657550.500000
Para hacer zoom en su mapa de dos niveles, simplemente agregue este pequeño código de línea map.setZoom(map.getZoom() + 2);
Su código a continuación está acercando el mapa para que se ajuste a los límites especificados:
addMarker(27.703402,85.311668,''New Road'');
center = bounds.getCenter();
map.fitBounds(bounds);
Si solo tiene 1 marcador y lo agrega a los límites, eso permite obtener el zoom más cercano posible:
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
}
Si realiza un seguimiento de la cantidad de marcadores que ha "agregado" al mapa (o ampliado los límites), solo puede llamar a fitBounds si ese número es mayor que uno. Usualmente presiono los marcadores en una matriz (para uso posterior) y pruebo la longitud de esa matriz.
Si solo tiene un marcador, no use fitBounds. Llame a setCenter , setZoom con la posición del marcador y su nivel de zoom deseado.
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
map.setCenter(pt);
map.setZoom(your desired zoom);
}
map.setZoom(zoom:number)
https://developers.google.com/maps/documentation/javascript/reference#Map