Sayfalar

23 Haziran 2013 Pazar

ASP.NET MVC GHeatMap (google heat map) kullanımı

_Layout.cshtml
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>@ViewBag.Title</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/modernizr")
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDaLyCTMxu8kuv2bHkY9EIxBMfpvNU83-Y&sensor=false&libraries=visualization">
        </script>
    </head>
    <body>
        @RenderBody()
        @RenderSection("scripts", required: false)
    </body>
</html>
Index.cstml
@{
    ViewBag.Title = "Index";
}
<script type="text/javascript">
    $(document).ready(function () {
        var map, mapProp;
        var heatmap;
        var pointArray = [];

        $.ajax({
            type: 'POST',
            url: '/Home/MapJson',
            success: function (data) {
                // pointArray dizisine gelen her datayı
                // atarak diziyi dolduruyoruz...
                $.each(data, function (index, data) {
                    pointArray.push({
                        location: new google.maps.LatLng(data.latitude, data.longtitude),
                        weight: data.weight
                    });
                });
            }
        });

        function initialize() {
            // harita ayarları yapılıyor
            // örneğin başlangıç noktası
            // ilk yakınlaşma değeri
            // ve grafigin tipi gibi ayarlar...
            mapProp = {
                center: new google.maps.LatLng(38.41, 27.22),
                zoom: 11,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };    
            map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
            heatmap = new google.maps.visualization.HeatmapLayer({
                data: pointArray
            });
            // harita yukleniyor
            heatmap.setMap(map);
            heatmap.setOptions({ radius: 10, maxIntensity: 3 });
        }

        // ilk sayfa yüklemesinde harita ilkleniyor.
        google.maps.event.addDomListener(window, 'load', initialize);
    });
</script>

<div id="googleMap" style="width: 640px; height: 480px;">
</div>
HomeController.cs
public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View();
    }

    public ActionResult MapJson()
    {
        List<location> locations = new List<location>();

        locations.Add(new Location { latitude = 38.41, longtitude = 27.21, weight = 1 });
        locations.Add(new Location { latitude = 38.44, longtitude = 27.22, weight = 5 });
        locations.Add(new Location { latitude = 38.45, longtitude = 27.23, weight = 2 });
        locations.Add(new Location { latitude = 38.42, longtitude = 27.24, weight = 7 });
        locations.Add(new Location { latitude = 38.43, longtitude = 27.25, weight = 4 });
        locations.Add(new Location { latitude = 38.46, longtitude = 27.26, weight = 5 });
        locations.Add(new Location { latitude = 38.47, longtitude = 27.27, weight = 5 });
        locations.Add(new Location { latitude = 38.39, longtitude = 27.28, weight = 5 });

        return Json(locations);
    }
}
Location.cs
public class Location
{
    public double latitude { get; set; }
    public double longtitude { get; set; }
    public int weight { get; set; }
}
Çıktı:
enter image description here

2 yorum:

  1. Bu paylaştığınız örneğin php ye göre yorumlanmış hali varmıdır elinizde paylaşabilirmisiniz ?

    YanıtlaSil
    Yanıtlar
    1. php için de kodlar aynı bir fark yok, sadece Location { latitude = 38.41, longtitude = 27.21, weight = 1 } veri yapısında bir liste donduren bir php sayfanız olacak o kadar.

      Sil