تگ های موضوع نمونه اسکریپت نقشه تعاملی با نشانگرها جاوا اسکریپت

نَمُونه اسکریپت نَقشه تَعَامُلی با نَشانگرها در جاوا اسکریپت

نقشه‌های تعاملی به کاربران این امکان را می‌دهند که به راحتی موقعیت‌ها را مشاهده کنند، جستجو کنند و با آن‌ها تعامل داشته باشند. در اینجا، به بررسی یک نمونه اسکریپت در جاوا اسکریپت برای ایجاد نقشه‌ای تعاملی با نشانگرها خواهیم پرداخت.

مَقدمه

برای ایجاد یک نقشه تعاملی، می‌توانیم از کتابخانه‌هایی مانند Google Maps API یا Leaflet استفاده کنیم. این کتابخانه‌ها به ما امکاناتی چون اضافه کردن نشانگر، تعامل با نقشه و بسیاری از قابلیت‌های دیگر را می‌دهند.

مراحل ایجاد نقشه

1. وارد کردن کتابخانه:
   

ابتدا باید کتابخانه مورد نظر خود را در HTML خود وارد کنید. برای مثال، اگر از Google Maps API استفاده می‌کنید، می‌توانید به شکل زیر عمل کنید:
```html
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
```

1. ایجاد عنصر نقشه:
   

در فایل HTML خود، یک عنصر `<div>` برای نقشه ایجاد کنید:
```html
<div id="map" style="height: 500px; width: 100%;"></div>
```

1. ایجاد تابع نقشه:
   

حالا، یک تابع جاوا اسکریپت برای بارگذاری نقشه بنویسید:
```javascript
function initMap() {
var location = {lat:

1. 6895, lng: 51.3890}; // موقعیت تهران
   

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: location
});
var marker = new google.maps.Marker({
position: location,
map: map,
title: 'تهران'
});
}
```

1. فراخوانی تابع:
   

در انتهای کد HTML، تابع `initMap` را فراخوانی کنید تا نقشه بارگذاری شود:
```html
<script>
window.onload = initMap;
</script>
```

نتیجه‌گیری

این کد به سادگی یک نقشه تعاملی با نشانگر در موقعیت مشخص شده ایجاد می‌کند. شما می‌توانید با تغییر موقعیت نشانگر یا اضافه کردن نشانگرهای بیشتر، نقشه را شخصی‌سازی کنید. با استفاده از این اسکریپت، کاربران قادر خواهند بود به راحتی با نقشه تعامل داشته باشند و مکان‌های مورد نظر خود را بیابند.
در نهایت، فراموش نکنید که API_KEY خود را جایگزین کنید و به مستندات مربوط به کتابخانه‌ها برای قابلیت‌های بیشتر مراجعه کنید.

اسکریپت نقشه تعاملی با نشانگرها در جاوا اسکریپت

ایجاد یک نقشه تعاملی که نشانگرهای متحرک و قابل کلیک داشته باشد، یکی از پروژه‌های جذاب و پرکاربرد در توسعه وب است. در این راهنما، قصد داریم به صورت کامل و جامع، نمونه‌ای از چنین اسکریپتی را بررسی کنیم. این اسکریپت به کاربر اجازه می‌دهد تا نقشه‌ای با قابلیت زوم، حرکت و نشانگرهای قابل تنظیم داشته باشد.
مبانی و ساختار اولیه
ابتدا، باید یک عنصر HTML برای نگهداری نقشه داشته باشیم، معمولا از تگ `<div>` استفاده می‌کنیم. سپس، با CSS، استایل‌های لازم را تعریف می‌کنیم، و در نهایت، با جاوا اسکریپت، قابلیت‌های تعاملی را پیاده‌سازی می‌کنیم.
```html
<div id="mapContainer">
<img src="your-map-image.png" id="map" />
<!-- نشانگرها به صورت عناصر جداگانه قرار می‌گیرند -->
<div class="marker" style="top: 50%; left: 30%;" data-info="مکان ۱"></div>
<div class="marker" style="top: 70%; left: 60%;" data-info="مکان ۲"></div>
</div>
```
در CSS، استایل پایه برای نقشه و نشانگرها:
```css
#mapContainer {
position: relative;
width: 800px; /* عرض نقشه */
height: 600px; /* ارتفاع نقشه */
overflow: hidden;
border: 1px solid #ccc;
margin: 20px auto;
cursor: grab;
}
#map {
width: 100%;
height: 100%;
transition: transform

1. 3s ease;
   

transform-origin: top left;
}
.marker {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
cursor: pointer;
transform: translate(-50%, -50%);
}
```
اضافه کردن قابلیت‌های تعاملی با جاوا اسکریپت
حالا، باید قابلیت زوم، حرکت و کلیک روی نشانگرها را پیاده‌سازی کنیم. در اینجا، نمونه‌ای ساده ولی کامل آورده شده است:
```javascript
const mapContainer = document.getElementById('mapContainer');
const map = document.getElementById('map');
const markers = document.querySelectorAll('.marker');
let isDragging = false;
let startX, startY;
let translateX = 0, translateY = 0;
let scale = 1;
// زوم با چرخ موس
mapContainer.addEventListener('wheel', (e) => {
e.preventDefault();
const delta = Math.sign(e.deltaY);
const zoomFactor =

1. 1;
   

if (delta < 0) {
scale += zoomFactor;
} else {
scale = Math.max(

1. 5, scale - zoomFactor);
   

}
updateTransform();
});
// حرکت نقشه با کلیک و کشیدن
mapContainer.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.clientX;
startY = e.clientY;
mapContainer.style.cursor = 'grabbing';
});
window.addEventListener('mouseup', () => {
isDragging = false;
mapContainer.style.cursor = 'grab';
});
window.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
startX = e.clientX;
startY = e.clientY;
translateX += dx;
translateY += dy;
updateTransform();
});
// بروزرسانی ترنسفورم
function updateTransform() {
map.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
}
// کلیک بر روی نشانگرها
markers.forEach(marker => {
marker.addEventListener('click', () => {
alert(marker.dataset.info);
});
});
```
نتیجه‌گیری و نکات مهم
در این نمونه، چند نکته مهم وجود دارد:
- اسکریپت قابلیت زوم با چرخ موس را دارد.
- کاربران می‌توانند نقشه را با کلیک و کشیدن جابه‌جا کنند.
- نشانگرها در نقاط مشخص شده قرار دارند و با کلیک، اطلاعات مربوطه را نشان می‌دهند.
- برای پروژه‌های پیچیده‌تر، می‌توان از کتابخانه‌های مانند Leaflet.js یا OpenLayers بهره برد.
در نهایت، این نمونه پایه‌ای است که می‌تواند بر اساس نیازهای پروژه، توسعه داده شود. افزودن امکاناتی نظیر محدود کردن حرکت، افزودن ابزارهای تعاملی بیشتر، و بهبود ظاهر، می‌تواند به کاربری بهتر کمک کند.