Leaflet - плавная прокрутка к элементу страницы (ID) при нажатии на маркер - PullRequest
Новая
       38

Leaflet - плавная прокрутка к элементу страницы (ID) при нажатии на маркер

0 голосов
/ 06 марта 2019

В настоящее время я ухожу из Google Maps, чтобы использовать вместо него Leaflet, и ранее у меня была динамическая карта с несколькими маркерами, где можно было щелкнуть маркер, и он использовал jQuery для плавной прокрутки до правильного соответствующего идентификатора на странице, а такжеизменил класс элемента в то же время.

Вы можете точно увидеть, как это работает здесь

Из-за моего очень ограниченного знания Javascript и Jquery я изо всех сил пытаюсь совместить подобное с Leafletпока у меня есть код ниже: 

var map = L.map('map').setView([50.822214, -0.138133], 10);

map.scrollWheelZoom.disable();

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


var LeafIcon = L.Icon.extend({
  options: {

    iconSize: [33, 45],
    iconAnchor: [19, 45],
    popupAnchor: [-3, -25]
  }
});

var mapIcon = new LeafIcon({
  iconUrl: '/site/custom/jackSmith/images/maps/marker.png'
});

var markers = [

  <
  c: forEach
  var = "property"
  items = "${listView.list}" > L.marker([ < c: out value = '${property.address.latitude}' / > , < c: out value = '${property.address.longitude}' / > ], {
    customId: "<c:out value='${property.ID}'/>",
    icon: mapIcon
  }).addTo(map).on('click', markerOnClick), < /c:forEach>
];


var group = L.featureGroup(markers).addTo(map);

setTimeout(function() {
  map.fitBounds(group.getBounds());
}, 0);

function markerOnClick(e) {
  var customId = this.options.customId;
  location.hash = customId;
}

Это в настоящее время приводит вас к правильному элементу на странице, но не использует плавную прокрутку и не меняет класс.Кто-нибудь знает простой способ сделать это на маркерах листовок?

Для справки код Google Maps, который я использовал, приведен ниже; 

jQuery(function($) {
  // Asynchronously Load the map API 
  var script = document.createElement('script');
  script.src = "http://maps.googleapis.com/maps/api/js?v=quarterly&sensor=false&callback=initialize&key=*APIKEYHERE*";
  document.body.appendChild(script);
});

function attachClickHandler(marker) {
  google.maps.event.addListener(marker, 'click', function() {

    var elem = $(marker.propertyid);
    $('.searchResult').removeClass('searchResultActive');
    /*console.log(marker.address);*/
    $('html, body').animate({
      scrollTop: elem.offset().top - 150
    }, 600);

    $(elem).addClass('searchResultActive');


  });


}

function initialize() {
  var map;
  var bounds = new google.maps.LatLngBounds();
  var mapOptions = {
    mapTypeId: 'roadmap',
    zoom: 12,
    maxZoom: 20
  };

  // Display a map on the page
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  // Multiple Markers
  var markers = [ <
    c: forEach
    var = "property"
    items = "${listView.list}" > ['<c:out value='
      $ {
        property.ID
      }
      '/>', < c: out value = '${property.address.latitude}' / > , < c: out value = '${property.address.longitude}' / > , '#<c:out value='
      $ {
        property.ID
      }
      '/>'
    ], < /c:forEach>
  ];

  // Display multiple markers on a map
  var infoWindow = new google.maps.InfoWindow(),
    marker, i;

  // Loop through our array of markers & place each one on the map  
  for (i = 0; i < markers.length; i++) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
      position: position,
      map: map,
      animation: google.maps.Animation.DROP,
      icon: '/site/custom/jackSmith/images/maps/marker.png',
      address: markers[i][0],
      propertyid: markers[i][3]
    });
    attachClickHandler(marker);



    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
  }


}
...