API de Google Maps API 3: límite de límites de panorámica/mapa

Soy completamente nuevo en Google Maps y solo estoy creando mi primer mapa para poder incorporarlo a mi sitio web.API de Google Maps API 3: límite de límites de panorámica/mapa

Estoy tratando de limitar el área que el usuario puede mover al Reino Unido y he visto varias publicaciones aquí que dan respuestas muy similares, sin embargo, no he podido lograr que el código funcione. yo. This solution is the closest that I have got Sin embargo, cada vez que intento mover el mapa, se centra en uno de mis puntos límite y no puedo moverlo a ningún otro lado.

Pude haber cometido un error realmente tonto, en cuyo caso me disculpo, sin embargo, no puedo resolver lo que está mal. ¿Alguien tiene alguna idea?

Gracias

Mi código está a continuación (tomado del código de ejemplo de Google y luego se añadió a) - la parte que es relevante para los límites se encuentra cerca de la parte inferior, comenzando con el establecimiento de los límites para el Reino Unido:

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <title>Google Maps</title> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map_canvas { height: 100% } 
    </style> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"> 
    </script> 

    <? 
    //code to get long and lat from http://www.webmonkey.com/2010/02/get_started_with_google_geocoding_via_http 
    $apikey = MYKEY; 
    $geourl = "http://maps.google.com/maps/geo?q=LS255AA&output=csv&key=$apikey"; 

    // Create cUrl object to grab XML content using $geourl 
    $c = curl_init(); 
    curl_setopt($c, CURLOPT_URL, $geourl); 
    curl_setopt($c, CURLOPT_RETURNTRANSFER, 1); 
    $csvContent = trim(curl_exec($c)); 
    curl_close($c); 

    // Split pieces of data by the comma that separates them 
    list($httpcode, $elev, $lat, $long) = split(",", $csvContent); 
    ?> 

    <script type="text/javascript"> 
    var lat = "<?= $lat ?>"; 
    var long = "<?= $long ?>"; 
    </script> 

    <script type="text/javascript"> 
     function initialize() { 
      //sets the long and lat of map 
      var myLatlng = new google.maps.LatLng(lat, long); 

      //options for the map 
      var myOptions = { 
       center: myLatlng, 
       zoom: 9, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      //creates the map 
      var mymap = new google.maps.Map(document.getElementById("map_canvas"), 
       myOptions); 

      //sets min and max zoom values 
      var opt = { minZoom: 7, maxZoom: 11 }; 
       mymap.setOptions(opt); 

      //creates marker 
      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: mymap, 
       title:"Hello World!" 
      }); 

      //content of infowindow 
      var contentString = '<h2>I am an info window</h2>'+'<p>Hello my name is infowindow, I need more text to test how big I get</p>'; 

      //creates infowindow 
      var infowindow = new google.maps.InfoWindow({ 
        content: contentString, 
      }); 

      //infowindow options 
      infowindow.setOptions({maxWidth:200}); 

      //listens for click and opens infowindow 
      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(mymap,marker); 
      }); 
      // Bounds for UK 
      var strictBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(60.88770, -0.83496), 
        new google.maps.LatLng(49.90878, -7.69042) 
      ); 

      // Listen for the dragend event 
      google.maps.event.addListener(mymap, 'dragend', function() { 
       if (strictBounds.contains(mymap.getCenter())) return; 

       // We're out of bounds - Move the map back within the bounds 
       var c = mymap.getCenter(), 
       x = c.lng(), 
       y = c.lat(), 
       maxX = strictBounds.getNorthEast().lng(), 
       maxY = strictBounds.getNorthEast().lat(), 
       minX = strictBounds.getSouthWest().lng(), 
       minY = strictBounds.getSouthWest().lat(); 

       if (x < minX) x = minX; 
       if (x > maxX) x = maxX; 
       if (y < minY) y = minY; 
       if (y > maxY) y = maxY; 

       mymap.setCenter(new google.maps.LatLng(y, x)); 
      }); 
     } 
    </script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width:50%; height:50%"></div> 

</body> 
</html>

Fuente

2012-02-01 Lucy Grainger

Tiene sus strictBounds mezclados - cambie el orden de ellos y debería funcionar bien.

Un LatLngBounds debería ser primera esquina SO, NE esquina segundos: http://code.google.com/apis/maps/documentation/javascript/reference.html#LatLngBounds

var strictBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(49.90878, -7.69042), 
    new google.maps.LatLng(60.88770, -0.83496) 
);

Fuente

2012-02-01 20:52:51

he descubierto que este método funciona bien cuando se mueve el mapa con el ratón, sin embargo todavía puedo venir más los límites si uso las herramientas de navegación por encima de los botones de zoom, es allí ¿Por qué evitar esto? –

¡Buena captura! Puede cambiar el tipo de evento en su oyente de 'dragend' a' bounds_changed'. Eso busca cualquier cambio en la ventana gráfica, por lo que incluirá el alejamiento más allá de los límites, el arrastre, el uso de los controles de navegación, etc. ¡Me alegra que lo hayas hecho funcionar! –

@MikeJeffrey ¿Qué significa el strictBounds y cómo se encuentra el lat de largo para el mapa de Singapur? –

Por encima de código me ayudó, pero no resolvió mi problema. Necesitaba deshabilitar la panorámica basada en el polígono dibujado en el mapa. Necesitaba limitar la panorámica a esa ventana particular del mapa. Entonces el usuario no se aleja del mapa inicial.

function disablePanning(enableBounds) { 
// listen to bound change event once to store the SW and NE corner 

google.maps.event.addListener(map, 'bounds_changed', function() { 
    // only set it once 
    if (enableBounds == null) { 
     enableBounds = map.getBounds(); 
    } 
}); 
var lastValidCenter=null; 
google.maps.event.clearListeners(map,'center_changed'); 
google.maps.event.addListener(map, 'center_changed', function() { 
    if(enableBounds!=null && lastValidCenter==null){ 
     lastValidCenter = enableBounds.getCenter(); 
    } 
    if (enableBounds != null && enableBounds != 'undefined') { 
     var ne = enableBounds.getNorthEast(); 
     var sw = enableBounds.getSouthWest(); 
     var allowedBounds = new google.maps.LatLngBounds(
       new google.maps.LatLng(sw.lat(), sw.lng()), 
       new google.maps.LatLng(ne.lat(), ne.lng())); 

     if (allowedBounds.contains(map.getCenter())) { 
      // still within valid bounds, so save the last valid position 
      lastValidCenter = enableBounds.getCenter(); 
      return; 
     } 

     // not valid anymore => return to last valid position 
     if(lastValidCenter!=null) 
      map.panTo(lastValidCenter); 
    } 
});

}

Fuente

2015-03-02 22:27:30 Ravi

API de Google Maps API 3: límite de límites de panorámica/mapa

Respuesta

Cuestiones relacionadas