Makale Özeti

Merhaba , bu makalede size google maps kütüphanesinden Polyline method'unu kullanarak verilen koordinatlar için harita üzerinde çizdirmekten bahsedeceğim.

Makale

Merhaba Arkadaşlar,

Burada göremediğim için sizler ile Google maps üzerinde verilen koordinatlar üzerinden haritada üzerine çizim ve gösterme hakkında bilgi paylaşacağım.

Fazla uzatmadan sayfa kodlarına ve açıklamalarına geçiyorum.

Uygulamada uygulanan matık özeti;

Bir web servis gps datatlarını yani koodinatlarını topluyor. Bizde bu servise bağlanıp toplanan koordinatları alıyoruz.

Bu işlem bittikten sonra Google maps kütüphanesinin bize sağladığı Polyline method'u ile gerekli koordinatları

çizim işlemine sokuyoruz.Bu geliştirme ile sizler daha farklı uygulamalar yapabilirsiniz.

Makale içerisinde yapılanların özeti;

Gps.aspx sayfasında ilk olarak sayfa hazırlanırken bir post işlemimiz oluyor. Bu post işlemini

url: "Gps.aspx/GetGpsData" buradan zaten görebilirsiniz. Bu post yapıldıktan sonra gelen veriler yani başlangış ve bitiş koordinatlarını biz array içerisine atıyoruz, bu işlem bittikten sonra ise hazırladığımız method'umuza paremetre olarak geçiyoruz. initialize(flightPlanCoordinates, flightPlanCoordinates1);

For içerisinde method'a paremetlerimizi flightPlanCoordinates.push(new google.maps.LatLng(deneme[i], d[i])); bu şekilde hazır hale getiriyoruz.

Nedeni ise ; new google.maps.Polyline({path: flightPlanCoordinates, bizden array aldığı için ona eşitliyoruz.Son olarak ise google.maps.event.addDomListener(window, 'load', initialize); işlemleri tamamlıyoruz.

Döküman:

https://developers.google.com/maps/documentation/javascript/examples/polyline-simple adresinden yararlana bilirsiniz.

 

Döküman Örnek:

Aşağıdaki kod parçası google sayfasındaki örneğidir.

 <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polylines</title>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
function initialize() {
  var myLatLng = new google.maps.LatLng(0, -180);
  var mapOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var flightPlanCoordinates = [
      new google.maps.LatLng(37.772323, -122.214897),
      new google.maps.LatLng(21.291982, -157.821856),
      new google.maps.LatLng(-18.142599, 178.431),
      new google.maps.LatLng(-27.46758, 153.027892)
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

GPS.ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Gps.aspx.cs" Inherits="Gps" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-ui/jquery-1.9.1.js"></script>
    <link href="Scripts/jquery-ui/jquery-ui.css" rel="stylesheet" />
    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
          //Bu style verisini eklemez iseniz haritayı göremessiniz.
        #map-canvas {
            height: 100%;
        }
    </style>
    <script src="Scripts/jquery-ui/jquery-ui.js"></script>

// aşağıdaki kütüphane'yi eklememiz gerekiyor nedeni ise maps özellikleri ve methodlarını kullanmamız
//için google bize bu imkanı sunmasıdır.
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> $(document).ready(function () { var flightPlanCoordinates = new Array(); var flightPlanCoordinates1 = new Array();
//bu post işleminin karşılığını Gps.aspx.cs dosyasında göreceksiniz.
$.ajax({ type: "POST", url: "Gps.aspx/GetKoodinatData", contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { for (var i = 0; i < msg.d.length; i++) { flightPlanCoordinates[i] = msg.d[i].Baslangic; flightPlanCoordinates1[i] = msg.d[i].Bitis; } initialize(flightPlanCoordinates, flightPlanCoordinates1); } }); }); </script> <script type="text/javascript"> function initialize(deneme, d) { //burada zomlayacağınız alanın koordinatlarını giriyorsunuz. var myLatLng = new google.maps.LatLng(41.0788522, 29.0472241); var mapOptions = { zoom: 20, //Harita üzerindeki adı üzerinde zoom özelliğini ayarlaması yapılıyor. center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP // Harita tipini belirliyorsunuz. }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var flightPlanCoordinates = []; for (var i = 0; i < d.length; i++) { flightPlanCoordinates.push(new google.maps.LatLng(deneme[i], d[i])); } var flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2 }); flightPath.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); </script>
</head> <body> <div id="map-canvas" /> </body> </html>

GPS.ASPX.CS using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Web; using System.Web.Services; using System.Web.UI; using System.Web.UI.WebControls; using Etarget; public partial class Gps : System.Web.UI.Page { [WebMethod] public static List<Koordinat> GetKoordinatData() { List<Koordinat> list = new List<Koordinat>(); Service client = new Service(); client.Url = "http://127.0.0.1/Servicewebservice.asmx"; UserHeader user = new UserHeader(); user.Username = "deneme"; user.Password = "ASSDF465A4ER7ER7T98WER65A4FG654"; client.UserHeaderValue = user; DateTime dateTime = new DateTime(2013, 8, 2, 00,00,59); DateTime endDateTime = new DateTime(2013, 8,2, 23,59,59); DataTable dt = client.GetKoordinatDataTable(dateTime.ToString("yyyyMMdd HH:ss:mm"), endDateTime.ToString("yyyyMMdd HH:ss:mm")); string Values = ""; foreach (DataRow item in dt.Rows) { list.Add(new Koordinat() { Baslangic = item.ItemArray[2].ToString().Replace(",","."), Bitis = item.ItemArray[3].ToString().Replace(",","."), }); } return list; } public class Koordinat { public string Baslangic { get; set; } public string Bitis { get; set; } } }



İlker TAŞKIN
twitter.com/ilker_taskin