¿Cómo localizar al usuario con el prospecto localizar?

Question

estoy tratando de localizar a un usuario y establecer el mapa para esta posición con folleto:

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

En ejecutar el navegador pide permiso, pero luego no pasa nada? ¿Qué pasa con mi código?

Answer 1

Tiene un problema con el alcance de su variable de mapa. He publicado un ejemplo que corrige su código aquí: http://jsfiddle.net/XwbsU/3/

Debe recibir la ventana emergente de geolocalización del navegador cuando hace clic en '¡Encuéntreme!'.

Espero que eso te ayude.

Answer 2

Aquí hay un truco rápido. Recomiendo este complemento 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');