Google Maps API 3 - yatay kaydırma/harita sınırları

Google Haritalar'a tamamen yeniyim ve web siteme dahil edebilmem için ilk haritamı oluşturuyorum.Google Maps API 3 - yatay kaydırma/harita sınırları

Kullanıcının yalnızca İngiltere’ye geçebileceği alanı sınırlamaya çalışıyorum ve burada çok benzer yanıtlar veren birkaç gönderiye baktım, ancak kodun işe yaramaya başlayamadım. ben mi. This solution is the closest that I have got Ancak, haritayı her zaman denediğimde ve hareket ettirdiğimde, sınır noktalarından birinde yer alıyorum ve başka bir yere taşıyamıyorum.

Gerçekten aptalca bir hata yapmış olabilirim, bu durumda özür dilerim, ancak neyin yanlış olduğunu anlayamıyorum. Herhangi bir fikri olan var mı?

teşekkür ederiz

Kodum aşağıda (Google'ın örnek kod alınan ve daha sonra eklenen kadar) olan - sınırları alakalı kısmı İngiltere için sınır ayarlama ile başlayan alt tarafındadır:

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

kaynak

2012-02-01 Lucy Grainger

Sıkı Çekimleriniz karıştırıldı - bunların sırasını değiştirin ve iyi çalışmalı. Yukarıdaki kod 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) 
);

kaynak

2012-02-01 20:52:51

Sana fare ile haritayı çeşitli taşıdığınızda bu yöntem ben zum düğmelerinin üstündeki gezinme araçlarını kullanırsanız ancak hala üzerinde sınırları gelebilir, iyi çalıştığını keşfettim, orada Bunu önlemek için anwyay? –

İyi yakalama! Dinleyicilerinizdeki etkinlik türünü, "dragend" ile "bounds_changed" arasında değiştirebilirsiniz. Bu, görünümdeki herhangi bir değişikliği arar, böylece sınırların dışına yakınlaştırma, sürükleme, gezinme denetimlerini kullanma vb. Içerir. Çalıştığınıza memnun oldum! –

@MikeJeffrey strictBounds'un anlamı nedir ve Singapur haritası için en uzun süreyi nasıl buluyorsunuz? –

bana yardımcı ama sorunumu çözmedi:

bir LatLngBounds

ikinci NE köşesi, ilk GB köşesini olmalıdır. Haritaya çizilen çokgenlere dayalı olarak panayı devre dışı bırakmam gerekiyordu. Haritanın belirli penceresine kaydırmayı sınırlandırmam gerekiyordu. Böylece kullanıcı ilk haritadan uzaklaşmıyor.

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

}

kaynak

2015-03-02 22:27:30 Ravi

Google Maps API 3 - yatay kaydırma/harita sınırları

cevap

İlgili konular