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

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

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

مَقدمه

برای ایجاد یک نقشه تعاملی، می‌توانیم از کتابخانه‌هایی مانند 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 خود را جایگزین کنید و به مستندات مربوط به کتابخانه‌ها برای قابلیت‌های بیشتر مراجعه کنید.