Мобильная версияМожно дважды щелкнуть или дважды нажать, чтобы добавить маркер на план этажа, а затем изменить масштаб или нет, чтобы маркер должен был измениться. оставаться в том же положении. Представьте, что вы хотите иметь маркер там, где должна быть лампочка, вы добавляете маркер в этом точном положении, а затем можете масштабировать план этажа, но маркер должен оставаться там, где он был добавлен, если только пользователь не коснется / не щелкнет еще раз.
Код: Выделить всё
Image Zoom and Marker
#image-container {
position: relative;
width: 100%;
max-width: 600px;
height: 400px;
overflow: hidden;
}
#image-container img {
width: 100%;
transform-origin: top left;
transition: transform 0.25s ease;
cursor: grab;
}
.marker {
position: absolute;
color: red;
pointer-events: none;
font-size: 23px;
transform-origin: bottom center;
}
#zoom-button {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.5);
border: none;
cursor: pointer;
z-index: 10;
padding: 5px;
border-radius: 10px;
}
#zoom-button i {
font-size: 2em;
color: white;
}
[i]
[/i]
$(document).ready(function() {
let scale = 1;
const maxScale = 5;
const minScale = 1;
const scaleStep = 1;
let isDragging = false;
let startX, startY;
let imgX = 0, imgY = 0;
let markerX, markerY;
let marker = null;
const image = $('#zoom-image');
const imageWidth = image.width();
const imageHeight = image.height();
$('#zoom-button').on('click', function() {
if (scale < maxScale) {
scale += scaleStep;
} else {
scale = minScale;
}
updateZoom();
updateMarker();
});
$('#image-container').on('dblclick', function(e) {
if ($(e.target).is('#zoom-button, #zoom-button *')) {
return;
}
const offsetX = e.pageX - image.offset().left;
const offsetY = e.pageY - image.offset().top;
markerX = (offsetX - imgX) / (imageWidth * scale);
markerY = (offsetY - imgY) / (imageHeight * scale);
updateMarker();
});
$('#zoom-image').on('mousedown touchstart', function(e) {
isDragging = true;
const event = e.type === 'mousedown' ? e : e.touches[0];
startX = event.pageX - imgX;
startY = event.pageY - imgY;
$('#zoom-image').css('cursor', 'grabbing');
e.preventDefault();
});
$(document).on('mousemove touchmove', function(e) {
if (isDragging) {
const event = e.type === 'mousemove' ? e : e.touches[0];
imgX = event.pageX - startX;
imgY = event.pageY - startY;
const maxX = (image.width() * scale - image.width()) / 2;
const maxY = (image.height() * scale - image.height()) / 2;
imgX = Math.max(-maxX, Math.min(imgX, maxX));
imgY = Math.max(-maxY, Math.min(imgY, maxY));
$('#zoom-image').css('transform', 'scale(' + scale + ') translate(' + imgX + 'px, ' + imgY + 'px)');
updateMarker();
}
});
$(document).on('mouseup touchend', function() {
isDragging = false;
$('#zoom-image').css('cursor', 'grab');
});
function updateMarker() {
if (marker) {
marker.remove();
}
if (markerX !== undefined && markerY !== undefined) {
const markerIcon = $('[i][/i]');
markerIcon.css({
top: (markerY * imageHeight * scale + imgY - 23) + 'px',
left: (markerX * imageWidth * scale + imgX - 11.5 * scale) + 'px',
transform: 'scale(' + scale + ')'
});
$('#image-container').append(markerIcon);
marker = markerIcon;
}
}
function updateZoom() {
$('#zoom-image').css('transform', 'scale(' + scale + ') translate(' + imgX + 'px, ' + imgY + 'px)');
}
});
Может ли кто-нибудь показать мне, где я делаю что-то глупое?
РЕДАКТИРОВАТЬ:
Теперь коду удается удерживать булавку в координатах при масштабировании, но если булавка выходит за пределы увеличенной части изображения и вам нужно добраться до метки, она переместится
РЕДАКТИРОВАТЬ 2 :
Поскольку направление не было желаемым, я использовал плагин, который помог достичь всех требований. Теперь я смогу отобразить маркер из изображения LeafletJS слева на точном фиксированном изображении справа. Почему-то это не работает, местоположение маркера сбилось, и непонятно почему:
Код: Выделить всё
Image Map with Marker
#map-container {
width: 700px;
height: 500px; /* Adjust height as needed */
position: relative; /* Ensure relative positioning for the image container */
overflow: hidden; /* Hide overflow to prevent zoomed image on the right top */
float: left; /* Float left for main map */
}
#right-container {
width: 300px;
height: 500px;
overflow: hidden;
position: relative;
float: left; /* Float left for right container */
margin-left: 20px; /* Add margin for separation */
}
#right-container img {
width: 100%;
height: auto; /* Maintain aspect ratio */
position: absolute; /* Position the image relative to the container */
top: 0;
left: 0;
}
.marker-container {
position: absolute;
font-size: 24px;
color: red;
}
[i]
$(document).ready(function() {
var map = L.map('map-container').setView([0, 0], 1); // Initialize map
var imageUrl = 'C:\\0877bd8f8386ae50ec097e8c7a6d4a29.jpg'; // Replace with the path to your JPG image
var originalImage = new Image();
originalImage.src = imageUrl;
originalImage.onload = function() {
var containerWidth = $('#map-container').width();
var containerHeight = $('#map-container').height();
var aspectRatio = originalImage.width / originalImage.height;
var overlay = L.imageOverlay(imageUrl, [[0, 0], [containerHeight, containerHeight / aspectRatio]]).addTo(map); // Add image overlay to map
map.fitBounds(overlay.getBounds()); // Fit map to image bounds
};
var marker = null;
var markerOverlay = $('#marker-overlay');
map.on('click', function(event) {
// Remove existing marker if it exists
if (marker) {
map.removeLayer(marker);
markerOverlay.empty(); // Remove existing marker in right container
}
// Adjust coordinates based on the current zoom level
var zoom = map.getZoom();
var containerPoint = map.latLngToContainerPoint(event.latlng); // Convert latlng to container pixel coordinates
var imgContainer = $('#right-container img');
var imgWidth = imgContainer.width();
var imgHeight = imgContainer.height();
var relX = containerPoint.x * imgWidth / $('#map-container').width();
var relY = containerPoint.y * imgHeight / $('#map-container').height();
// Add marker in right container
markerOverlay.html('[/i]');
markerOverlay.css({
top: relY - markerOverlay.height() / 2,
left: relX - markerOverlay.width() / 2
});
// Add marker to map at default LatLng
marker = L.marker(event.latlng).addTo(map);
});
});
Подробнее здесь: https://stackoverflow.com/questions/785 ... floor-plan
