توضیحات و دانلود

پیاده سازی Google Maps از بانک اطلاعات در ASP.Net MVC Razor
0 0
پیاده سازی Google Maps از بانک اطلاعات در ASP.Net MVC Razor

با سلام در این مقاله با یک مثال نحوه پیاده سازی ، جمع و نمایش Google Maps V3 از پایگاه داده در ASP.Net MVC 5 Razor را توضیح خواهیم داد
سوابق بانک اطلاعاتی از اطلاعات طول و عرض جغرافیایی برای جمع آوری نقشه های Google با نشانگرهای متعدد در ASP.Net MVC 5 Razor استفاده خواهد شد.
بانک اطلاعات
در زیر طرح جدول مکانهایی است که شهرها و مکانهای جغرافیایی آنها را ذخیره می کند.

در جدول رکورد هایی با اطلاعات طول و عرض جغرافیایی سه شهر مختلف به همراه نام و توضیحات آنها درج شده است.

توجه : می توانید جدول بانک اطلاعاتی SQL را با کلیک روی لینک زیر بارگیریدانلود کنید.
فایل SQL را بارگیری کنید
فضاهای نام
باید نامهای زیر را وارد کنید.

using System.Data.SqlClient;
using System.Configuration;

Controller
Controller از روش Index Action تشکیل شده است. در داخل این روش ، سوابق با استفاده از ADO.Net از جدول مکان ها گرفته می شوند .
نقشه های Google به مجموعه ای از نشانگرها احتیاج دارند که شامل نام ، عرض جغرافیایی ، طول و توضیحات است و از این رو یک آرایه جاوا اسکریپت از سوابق موقعیت مکانی منتخب با کمک امتیاز رشته ساخته می شود.
رشته تولید شده به یک شی ViewBag اختصاص داده می شود.

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        string markers = "[";
        string conString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
        SqlCommand cmd = new SqlCommand("SELECT * FROM Locations");
        using (SqlConnection con = new SqlConnection(conString))
        {
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    markers += "{";
                    markers += string.Format("'title': '{0}',", sdr["Name"]);
                    markers += string.Format("'lat': '{0}',", sdr["Latitude"]);
                    markers += string.Format("'lng': '{0}',", sdr["Longitude"]);
                    markers += string.Format("'description': '{0}'", sdr["Description"]);
                    markers += "},";
                }
            }
            con.Close();
        }
 
        markers += "];";
        ViewBag.Markers = markers;
        return View();
    }
}

View
View شامل یک عنصر HTML DIV است که برای بارگیری و نمایش نقشه گوگل استفاده خواهد شد.
توجه : برای اجرای برنامه Google Maps باید ثبت نام کرده و کلید API را در Google API ثبت کنید. برای اطلاعات بیشتر به اینجا مراجعه کنید .
آرایه نشانگرهای ساخته شده در داخل Controller به متغیر نشانگر JavaScript اختصاص داده می شود. سپس در داخل Controller رویداد JavaScript Window OnLload ، ابتدا Google Maps درون عنصر HTML DIV نمایش داده می شود و سپس با استفاده از یک حلقه ، نشانگر روی نقشه برای هر شهر موجود در آرایه ترسیم می شود.

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <div id="dvMap" style="width: 500px; height: 500px">
    </div>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_Key"></script>
    <script type="text/javascript">
        var markers = @Html.Raw(ViewBag.Markers);
        window.onload = function () {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(data.description);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
            }
        }
    </script>
</body>
</html>

عکس صفحه

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :