Wie finde ich den Benutzer mit der Broschüre?

Question

Ich versuche, einen Benutzer und legen Sie die Karte auf dieser Position mit Faltblatt zu finden:

<script> 
    var map; 

    function initMap(){ 
     map = new L.Map('map',{zoomControl : false}); 
     var osmUrl = 'http://{s}.tile.openstreetmap.org/mapnik_tiles/{z}/{x}/{y}.png', 
      osmAttribution = 'Map data &copy; 2012 OpenStreetMap contributors', 
      osm = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution}); 
     map.setView(new L.LatLng(51.930156,7.189230), 7).addLayer(osm); 
    } 

    function locateUser(){ 
     map.locate({setView : true}); 
    } 
</script> 

On führen Sie den Browser um Erlaubnis fragen, aber dann passiert nichts? Was ist falsch an meinem Code?

Answer 1

Sie haben ein Problem mit dem Umfang Ihrer Map-Variable. Ich habe ein Beispiel gepostet, das Ihren Code hier behebt: http://jsfiddle.net/XwbsU/3/

Sie sollten das Browser-Geolocation-Popup erhalten, wenn Sie auf "Find me!" Klicken.

Hoffentlich hilft das Ihnen.

Answer 2

Hier ist ein kurzer Hack. Ich empfehle dieses Plugin https://github.com/domoritz/leaflet-locatecontrol

var loadMap = function (id) { 
    var HELSINKI = [60.1708, 24.9375]; 
    var map = L.map(id); 
    var tile_url = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'; 
    var layer = L.tileLayer(tile_url, { 
     attribution: 'OSM' 
    }); 
    map.addLayer(layer); 
    map.setView(HELSINKI, 19); 

    map.locate({setView: true, watch: true}) /* This will return map so you can do chaining */ 
     .on('locationfound', function(e){ 
      var marker = L.marker([e.latitude, e.longitude]).bindPopup('Your are here :)'); 
      var circle = L.circle([e.latitude, e.longitude], e.accuracy/2, { 
       weight: 1, 
       color: 'blue', 
       fillColor: '#cacaca', 
       fillOpacity: 0.2 
      }); 
      map.addLayer(marker); 
      map.addLayer(circle); 
     }) 
     .on('locationerror', function(e){ 
      console.log(e); 
      alert("Location access denied."); 
     }); 
}; 

loadMap('map');