API di Google Maps 3 - limiti limite pan/mappa

Sono completamente nuovo in Google Maps e sto solo creando la mia prima mappa in modo da poterla incorporare nel mio sito web.API di Google Maps 3 - limiti limite pan/mappa

Sto cercando di limitare l'area in cui l'utente può spostarsi solo nel Regno Unito e ho visto diversi post qui che danno risposte molto simili, tuttavia non sono riuscito a far funzionare il codice per me. This solution is the closest that I have got tuttavia ogni volta che provo a spostare la mappa, tutto si concentra su uno dei miei punti di confine e non riesco a spostarlo da nessun'altra parte.

forse ho commesso un errore davvero sciocco, nel qual caso mi scuso, ma non riesco a capire che cosa è sbagliato. Qualcuno ha qualche idea?

Grazie

Il mio codice è sotto (preso dal codice di esempio di Google e quindi aggiunto) - la parte che è rilevante per i limiti è vicino al fondo, a cominciare con l'impostazione dei limiti per il Regno Unito:

<!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>

fonte

2012-02-01 Lucy Grainger

avete la vostra strictBounds mescolati - modificare l'ordine di loro e dovrebbe funzionare bene.

Un LatLngBounds dovrebbe essere angolo SW prima, NE angolo secondo: 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) 
);

fonte

2012-02-01 20:52:51

ho scoperto che questo metodo funziona bene quando si sposta la mappa con il mouse, ma posso ancora più di venire i confini se uso gli strumenti di navigazione sopra i pulsanti di zoom, è lì forse di impedirlo? –

Buona cattura! Puoi cambiare il tipo di evento nel listener da 'dragend' a' bounds_changed'. Questo cerca qualsiasi cambiamento nel viewport, quindi includerà lo zoom oltre i limiti, il trascinamento, usando i controlli di navigazione, ecc. Sono contento che tu abbia funzionato! –

@MikeJeffrey Che cosa significa strictBounds e come si trova lat long per la mappa di Singapore? –

Sopra il codice mi ha aiutato, ma non ha risolto il mio problema. Avevo bisogno di disabilitare il panning basato sul poligono disegnato sulla mappa. Avevo bisogno di limitare il panning a quella particolare finestra della mappa. Quindi l'utente non può spostarsi lontano dalla mappa iniziale.

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); 
    } 
});

}

fonte

2015-03-02 22:27:30 Ravi

API di Google Maps 3 - limiti limite pan/mappa

risposta

Problemi correlati