javascript - 如何使用传单定位定位用户?

标签 javascript leaflet

我正在尝试定位用户并使用传单将 map 设置到这个位置:

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

在执行浏览器时请求权限,但没有任何反应?我的代码有什么问题?

最佳答案

这是一个快速技巧。我推荐这个插件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');

关于javascript - 如何使用传单定位定位用户?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10563789/

相关文章:

php - JavaScript 中的链接?

html - 传单 map 未填满整个包装器 div

javascript - 如何将 LeafletJS polylineDecorator 插件与 GeoJSON featureCollection 一起使用?

javascript - 3.x 中 Component 中的 MapContainer 添加 onClick

javascript - React.JS 无法读取数组循环中的属性

javascript - Shopify - 更改我的选择器选项产品下拉变体的文本

javascript - 试图将 jquery 插件转换为 Angular 指令

javascript - 当我尝试在 localStorage js 上创建数组时为空

javascript - Leaflet::根据缩放级别更改图标

leaflet - 使多个标记可拖动