如何使用传单定位定位用户？

Posted 2023-04-14

【中文标题】如何使用传单定位定位用户？

【英文标题】：How to locate user with leaflet locate?

【发布时间】：2018-11-27 13:23:27

【问题描述】：

我正在尝试定位用户并使用传单将地图设置到此位置：

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

在执行浏览器请求许可，但没有任何反应？我的代码有什么问题？

【问题讨论】：

我们不知道传单是什么，也不知道您在做什么。那一行代码听起来不错，但你真的需要给我们更多。也许是您的代码的链接，以及您迄今为止尝试过的信息。另外，去接受一些答案 - 您有 9 个月前的问题尚未接受答案！

我在第一篇文章中编辑了整个源代码。 Leaflet 是一个地图库。详情在这里：leaflet.cloudmade.com

你能粘贴你的整个代码吗？您是否包含所有必需的传单文件？你如何检测用户的位置？你的函数正在执行吗？

还有一点需要注意的是 Leaflet 定位功能仅适用于 https 网站。

【参考方案1】：

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

【讨论】：

你知道我怎么可以在这里添加一些选项，特别是：locateOptions: maxZoom: 15

这里是文档leafletjs.com/reference.html#map-locate-options，您只需像 map.locate(maxZoom: 15, ... ) 一样添加它

leaflet-locateplugin 是否适用于 Ionic(android/ios)？

【参考方案2】：

您的地图变量范围存在问题。我在这里发布了一个修复您的代码的示例：http://jsfiddle.net/XwbsU/3/

当您点击“找到我！”时，您应该会收到浏览器地理位置弹出窗口。

希望对你有所帮助。

【参考方案3】：

或者，您可以将所有代码放在 getLocation() 函数下，并在网页加载时调用该函数，您应该已经准备就绪。我使用这种方式，一旦浏览器加载它就会弹出一个共享数据的问题。