افزودن مارکر به نقشه با استفاده از کتابخانه Leaflet
برای استفاده از کیت توسعه‌ی نقشه وب ابتدا بایستی از طریق ثبت نام رایگان در پنل توسعه‌دهندگان نشان، اقدام به دریافت کلید دسترسی برای (API Key) برای وب‌سایت یا اپلیکیشن تحت وب خود نمایید.
فهرست مطالب این صفحه
در اینجا با استفاده از کتابخانه leaflet نشان یک نقشه را پیاده سازی می‌کنیم و سپس بر روی موقعیت جغرافیایی مشخص شده مارکر را به نقشه اضافه می‌کنیم.
1- راه اندازی صفحه
ابتدا یک فایل HTML با محتوای زیر ایجاد می‌کنیم. توجه داشته باشید برای نمایش نقشه ما نیازمند این هستیم که نقشه را با یک Id شناسایی کنیم. از این رو یک div با id مشخص ایجاد می‌کنیم تا محل قرار گیری نقشه ما باشد.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8"/>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Neshan Leaflet Map</title>
<link rel="stylesheet" href="https://static.neshan.org/sdk/leaflet/v1.9.4/neshan-sdk/v1.0.8/index.css"/>
<script src="https://static.neshan.org/sdk/leaflet/v1.9.4/neshan-sdk/v1.0.8/index.js"></script>
<style>
body {
height: 100vh;
width: 100vw;
margin: 0;
}
#map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
</script>
</body>
</html>
2- افزودن نقشه
حال در قسمت <script> برای ایجاد نقشه کد های زیر را اضافه می‌کنیم.
// Create a Leaflet map
const neshanMap = new L.Map("map", {
key: "YOUR_API_KEY", // Get your own API Key on https://platform.neshan.org/panel
maptype: "neshan",
poi: true,
traffic: true,
center: [35.699756, 51.338076],
zoom: 14,
})
با افزودن تکه کد های بالا صفحه ما به شکل زیر تکمیل می‌شود. در این مرحله با اجرای صفحه نقشه به شما نمایش داده می‌شود.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8"/>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Neshan Leaflet Map</title>
<link rel="stylesheet" href="https://static.neshan.org/sdk/leaflet/v1.9.4/neshan-sdk/v1.0.8/index.css"/>
<script src="https://static.neshan.org/sdk/leaflet/v1.9.4/neshan-sdk/v1.0.8/index.js"></script>
<style>
body {
height: 100vh;
width: 100vw;
margin: 0;
}
#map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Create a Leaflet map
const neshanMap = new L.Map("map", {
key: "YOUR_MAP_API_KEY", // Get your own API Key on https://platform.neshan.org/panel
maptype: "neshan",
poi: true,
traffic: true,
center: [35.699756, 51.338076],
zoom: 14,
});
</script>
</body>
</html>
خروجی کد بالا:
3- افزودن مارکر
با افزودن تکه کد های زیر مارکر در محل مشخص شده بر روی نقشه قرار میگیرد:
// add marker to map
let marker = L.marker([35.699756, 51.338076]).addTo(neshanMap);
پس از افزودن تکه کد بالا محتویات صفحه به شکل زیر در می‌آید:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8"/>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Neshan Leaflet Map</title>
<link rel="stylesheet" href="https://static.neshan.org/sdk/leaflet/v1.9.4/neshan-sdk/v1.0.8/index.css"/>
<script src="https://static.neshan.org/sdk/leaflet/v1.9.4/neshan-sdk/v1.0.8/index.js"></script>
<style>
body {
height: 100vh;
width: 100vw;
margin: 0;
}
#map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Create a Leaflet map
const neshanMap = new L.Map("map", {
key: "YOUR_MAP_API_KEY", //// Get your own API Key on https://platform.neshan.org/panel
maptype: "neshan",
poi: true,
traffic: true,
center: [35.699756, 51.338076],
zoom: 14,
})
// add marker to map
let marker = L.marker([35.699756, 51.338076]).addTo(neshanMap);
</script>
</body>
</html>
