افزودن مارکر به نقشه با استفاده از کتابخانه OpenLayers

برای استفاده از کیت توسعه‌ی نقشه وب ابتدا بایستی از طریق ثبت نام رایگان در پنل توسعه‌دهندگان نشان، اقدام به دریافت کلید دسترسی برای (API Key) برای وب‌سایت یا اپلیکیشن تحت وب خود نمایید.

در اینجا با استفاده از کتابخانه OpenLayers نشان یک نقشه را پیاده سازی می‌کنیم و سپس بر روی موقعیت جغرافیایی مشخص شده مارکر را به نقشه اضافه می‌کنیم.

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>OpenLayers Neshan Map</title>


   <link rel="stylesheet" href="https://static.neshan.org/sdk/openlayers/v8.1.0/neshan-sdk/v1.0.5/index.css" />
  <script src="https://static.neshan.org/sdk/openlayers/v8.1.0/neshan-sdk/v1.0.5/index.js"></script>

    <style>
        body {
            height: 100vh;
            width: 100vw;
            margin: 0;
        }

        #map {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    
<div id="map"></div>

<script type="text/javascript">

</script>
</body>
</html>

2- افزودن نقشه

حال در قسمت <script> برای ایجاد نقشه کد های زیر را اضافه می‌کنیم.

               var neshanMap = new ol.Map({
        target: 'map',
        key: 'YOUR_API_KEY', // Get your own API Key on https://platform.neshan.org/panel
        maptype: 'neshan',
        poi: false,
        traffic: false,
        view: new ol.View({
            center: ol.proj.fromLonLat([51.338076, 35.699756]),
            zoom: 14
        })
    });

با افزودن تکه کد های بالا صفحه ما به شکل زیر تکمیل می‌شود. در این مرحله با اجرای صفحه نقشه به شما نمایش داده می‌شود.

کلید دسترسی سرویس (api-key) برای ساخت کلید دسترسی (api-key) مناسب برای این سرویس شما باید در پنل ساخت کلید دسترسی گزینه نقشه وب را انتخاب کنید. این را هم در نظر داشته باشید برای امنیت بیشتر کلید دسترسی خود و جلو گیری از سواستفاده شدن از آن domain سرور خود را نیز میتوانید در فیلد دامنه/Ip های مجاز وارد کنید.

            <!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>OpenLayers Neshan Map</title>


   <link rel="stylesheet" href="https://static.neshan.org/sdk/openlayers/v8.1.0/neshan-sdk/v1.0.5/index.css" />
  <script src="https://static.neshan.org/sdk/openlayers/v8.1.0/neshan-sdk/v1.0.5/index.js"></script>

    <style>
        body {
            height: 100vh;
            width: 100vw;
            margin: 0;
        }

        #map {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">

    var neshanMap = new ol.Map({
        target: 'map',
        key: 'YOUR_MAP_API_KEY', // Get your own API Key on https://platform.neshan.org/panel
        maptype: 'neshan',
        poi: false,
        traffic: false,
        view: new ol.View({
            center: ol.proj.fromLonLat([51.338076, 35.699756]),
            zoom: 14
        })
    });
    
</script>
</body>
</html>

خروجی کد بالا:

3- افزودن مارکر

با افزودن تکه کد های زیر مارکر در محل مشخص شده بر روی نقشه قرار می‌گیرد، برای نمایش مارکر ما از تصویر زیر استفاده کرده ایم:

              // add Marker to the map
    var marker = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.fromLonLat([51.338076, 35.699756]))
    });

    marker.setStyle(new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [0.5, 1],
        scale: 0.5,
        src: 'marker-icon-2x-red.png'
      })
    }));

    var vectorSource = new ol.source.Vector({
      features: [marker]
    });

    var vectorLayer = new ol.layer.Vector({
      source: vectorSource
    });

    neshanMap.addLayer(vectorLayer);

پس از افزودن تکه کد بالا محتویات صفحه به شکل زیر در می‌آید:

            <!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>OpenLayers Neshan Map ( Marker example )</title>


 <link rel="stylesheet" href="https://static.neshan.org/sdk/openlayers/v8.1.0/neshan-sdk/v1.0.5/index.css" />
  <script src="https://static.neshan.org/sdk/openlayers/v8.1.0/neshan-sdk/v1.0.5/index.js"></script>
  <style>
    body {
      height: 100vh;
      width: 100vw;
      margin: 0;
    }

    #map {
      height: 100%;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script type="text/javascript">

    var neshanMap = new ol.Map({
      target: 'map',
      key: 'YOUR_MAP_API_KEY', // Get your own API Key on https://platform.neshan.org/panel
      maptype: 'neshan',
      poi: false,
      traffic: false,
      view: new ol.View({
        center: ol.proj.fromLonLat([51.338076, 35.699756]),
        zoom: 14
      })
    });


    // add Marker to the map
    var marker = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.fromLonLat([51.338076, 35.699756]))
    });

    marker.setStyle(new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [0.5, 1],
        scale: 0.5,
        src: 'marker-icon-2x-red.png'
      })
    }));

    var vectorSource = new ol.source.Vector({
      features: [marker]
    });

    var vectorLayer = new ol.layer.Vector({
      source: vectorSource
    });

    neshanMap.addLayer(vectorLayer);
    
  </script>
</body>

</html>

افزودن مارکر به نقشه با استفاده از کتابخانه OpenLayers