Центрирование карты в том месте, где находится пользователь в OpenStreetMap - PullRequest
Новая
       17

Центрирование карты в том месте, где находится пользователь в OpenStreetMap

2 голосов
/ 10 июня 2019

Я начинающий вебмастер.У меня есть карта с 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>

Этот код отлично работает.

Мне нужно добавить к этой карте: - центрирование карты в том месте, где находится пользователь (местоположение пользователя),- центр круга в месте, где находится пользователь (местоположение пользователя.

Как я могу это сделать? Кто-нибудь знает, как это сделать?

1 Ответ

1 голос
/ 10 июня 2019

Вы можете использовать geolocation.setTracking, чтобы true, он автоматически получит текущее местоположение пользователя и отобразит синюю точку - Пример ссылки

или вы можете использовать объект navigator javascript, чтобы получить текущие значения пользователей и передать их на карту улиц 

navigator.geolocation.getCurrentPosition(showPosition);

Пример ссылка для получения имени пользователя

добавить код после инициализации карты. 

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.");
}
...