Làm thế nào để xác định vị trí người dùng với tờ rơi xác định vị trí?

Question

Tôi đang cố gắng xác định vị trí một người sử dụng và thiết lập bản đồ đến vị trí này với tờ rơi:

<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 thực hiện trình duyệt xin phép, nhưng sau đó không có gì xảy ra? Có gì sai với mã của tôi?

Answer 1

Bạn có vấn đề với phạm vi biến bản đồ của mình. Tôi đã đăng ví dụ sửa mã của bạn tại đây: http://jsfiddle.net/XwbsU/3/

Bạn sẽ nhận được cửa sổ bật lên vị trí địa lý của trình duyệt khi bạn nhấp vào 'Tìm tôi!'.

Hy vọng điều đó sẽ giúp ích cho bạn.

Answer 2

Đây là một bản hack nhanh. Tôi khuyên bạn nên sử dụng plugin này 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');