将地图居中放置在 OpenStreetMap 中用户所在的位置

Question

我是新手站长。我有带有 2 个标记和圆形的地图。我有这个代码：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>title</title>
      <link rel="stylesheet" href="style.css">
      <script src="script.js"></script>
      <link href="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet.css" rel="stylesheet" type="text/css" />
      <script src="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet.js"></script>
      <script src="Leaflet.Editable.js"></script>
      <style type="text/css">
         #mapdiv { height: 500px; }
      </style>
   </head>
   <body>
      <div id="mapdiv"></div>
      <script type="text/javascript">
         var map = L.map('mapdiv', {editable: true}).setView([54.35070881441067, 18.641191756395074], 13);
         L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
             attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
             maxZoom: 30
         }).addTo(map);

         var LeafIcon = L.Icon.extend({
             options: {
                 shadowUrl: 'leaf-shadow.png',
                 iconSize:     [38, 95],
                 shadowSize:   [50, 64],
                 iconAnchor:   [22, 94],
                 shadowAnchor: [4, 62],
                 popupAnchor:  [-3, -76]
             }
         });

         var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),
             redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
             orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});

         L.icon = function (options) {
             return new L.Icon(options);
         };

         L.marker([54.45070881441067, 18.541191756395074], {icon: greenIcon}).addTo(map).bindPopup('yyyyyy.<br> Easily customizable.');
         L.marker([54.35070881441367, 18.641191756395774], {icon: redIcon}).addTo(map).bindPopup('xxxxxxx.<br> Easily customizable.').openPopup();

         L.EditControl = L.Control.extend({
             options: {
                 position: 'topleft',
                 callback: null,
                 kind: '',
                 html: ''
             },

             onAdd: function (map) {
                 var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
                     link = L.DomUtil.create('a', '', container);

                 link.href = '#';
                 link.title = 'Create a new ' + this.options.kind;
                 link.innerHTML = this.options.html;
                 L.DomEvent.on(link, 'click', L.DomEvent.stop)
                           .on(link, 'click', function () {
                             window.LAYER = this.options.callback.call(map.editTools);
                           }, this);

                 return container;
             }
         });

         var circle = L.circle([54.35070881441067, 18.641191756395074], {radius: 1000}).addTo(map);
         circle.enableEdit();
         circle.on('dblclick', L.DomEvent.stop).on('dblclick', circle.toggleEdit);
         //circle.on('editable:vertex:drag', function (e) {
         map.on('editable:drawing:move', function (e) {
             console.log(circle.getLatLng())
             console.log(circle.getRadius());
         });
      </script>
   </body>
</html>

这段代码工作正常。

我需要添加到这张地图： - 将地图以用户所在的位置（用户的位置）为中心， - 中心圆圈在用户所在的地方（用户所在的位置。

我怎样才能做到？有人知道怎么做吗？

Answer 1

您可以使用 geolocation.setTracking 为真，它会自动获取用户当前位置并显示一个蓝点 - Example Link

或者您可以使用 navigator javascript 对象获取用户当前的经纬度并将其传递给打开的街道地图

navigator.geolocation.getCurrentPosition(showPosition);

示例link 获取用户的经纬度

在地图初始化后添加代码。

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    /* map is object of Leaflet Map (var map = L.map(... )*/
    map.panTo(new L.LatLng(position.coords.latitude, position.coords.longitude));
  });
} else {
  alert("Geolocation is not supported by this browser.");
}

将地图居中放置在 OpenStreetMap 中用户所在的位置

Centering the map in the place where the user is located in OpenStreetMap

javascript

jquery

openstreetmap

leaflet