我目前正离开Google Maps改用Leaflet,以前我有一个带有多个标记的动态地图,您可以在其中单击标记,它使用jQuery平滑滚动到页面上正确的对应ID,并且同时更改了元素的类。
您可以确切了解其运作here
由于我对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: '© <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);
}
}