Leaflet maxTunds - sınırlar çalışmıyor

example code I found at Mapbox ile Leafletjs maxBounds'u denedim.Leaflet maxTunds - sınırlar çalışmıyor

Tam kodumu, ayrıca bir jsfiddle here içinde bulabilirsiniz.

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>map - leaflet test bounds</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

     <!-- leafletjs --> 
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> 
     <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 

     <style> 
      body { 
       margin: 0; 
       padding: 0; 
      } 
      html, body, #map { 
       height: 100%; 
       width: 100%; 
      } 
     </style> 
</head> 

<body> 
    <div id="map"> 
     <script> 

      var southWest = L.latLng(40.712, -74.227), 
       northEast = L.latLng(40.774, -74.125), 
       mybounds = L.latLngBounds(southWest, northEast); 

      var map = L.map('map').setView([40.743, -74.176], 17); 
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png' , { 
       maxBounds: mybounds, 
       maxZoom: 18, 
       minZoom: 16, 
       attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' 
      }) .addTo(map); 

      L.marker([40.743, -74.176]) .addTo(map); 

     </script> 
    </div>   
</body>

jsfiddle sonuç tuhaf görünüyor, nedenini bilmiyorum.

Neden üst kod Mapbox örneği gibi çalışmıyor?

kaynak

2015-03-22 wolfmuc

Sınırları L.tileLayer seçeneği olarak kullanmanız ve maxBounds kullanmanız gerekir. http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css

Son olarak, JSFiddle yüzde boyutları kullanmak önlemek, kullanım:

Bounds reference

Ayrıca, bu JSFiddle içinde leaflet.css için yanlış dosyayı yüklenen ettik görünüyor, doğru kaynak şudur Bunun yerine piksel olanlar. http://jsfiddle.net/1zyL4q4a/4/

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png' , { 
      bounds: mybounds, 
      maxZoom: 18, 
      minZoom: 16, 
      attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' 
    }).addTo(map);

kaynak

2015-03-22 07:51:02

MaxBounds'un doğru olduğunu düşünüyorum. "Bu seçenek belirlendiğinde, harita görünümü dışına kaydırmaya çalıştığında, kullanıcıyı geri kalan coğrafi sınırlarla kısıtlar." [link] (leafletjs.com/reference.html) [/ link] Kullanıcıya geri dönmek istiyorum. Jsfidlle'de css'yi kontrol ettim. Bu yanlıştı. Şimdi çalışıyor. Teşekkürler. – wolfmuc

maxBounds harita görünümünü kısıtlamak içindir (L.tileLayer ile değil, harita ile kullanın), sınırlar fayans yükleme –

maxBounds kısıtlamak içindir ve sınırları benim bakış açısıyla çok benzer. Deneyeceğim. – wolfmuc

Bu (benim) nihai kodudur: İşte çalışan bir JSFiddle bu.

var map = L.map('map', { 
    maxZoom: 18, 
    minZoom: 16, 
    maxBounds: [ 
     //south west 
     [40.712, -74.227], 
     //north east 
     [40.774, -74.125] 
     ], 
}).setView([40.743, -74.176], 17); 

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
    attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' 
}) .addTo(map); 

L.marker([40.743, -74.176]) .addTo(map);

kaynak

2015-03-23 06:26:30 wolfmuc

Leaflet maxTunds - sınırlar çalışmıyor

cevap

İlgili konular