ionic ngMaps haritalar

Buradaki yaptıgımız google maps harita üzerinde yol tarifi için daha güzel ve daha kısa bir yol kesfettim "ngMaps".  o kadar uzun uzadıya kod yazmayada gerek yokmuş. öncelikle plugin ayarlarını buradan yapmanız gerekiyor . Çünkü kendi kordinatlarımız için  cordova-plugin-geolocation  pluginini kullanacağız.

öncelikle kendi koordinatlarımızı alalım:

terminal:
$ cordova plugin add cordova-plugin-geolocation

www/js/controller.js
.controller('MapCtrl',function($scope,$stateParams,$cordovaGeolocation){

  var posOptions = {timeout: 5000, enableHighAccuracy: true,maximumAge: 0};
           $cordovaGeolocation
            .getCurrentPosition(posOptions)
            .then(function (position) {
               $scope.mylat  = position.coords.latitude;
               $scope.mylon = position.coords.longitude;
            }, function(err) {
            })

//gitmek istediğimiz yer
$scope.kx=41.3300962;
$scope.ky=36.291600;


aradaki mesafeyi bir değişkene atalım belki sonradan kullanırız:
$scope.mesafe=0;

}

www/template/map.html

<ion-item>
<p>Bulundugum yer        A : ( x: {{mylat}} ,  y:{{mylon}})<p>
</ion-item>

ngMap için ng-map ve map-api dosyalarını indirip www/js altına kopyalayın.

index.html  de scriptlerin en altına ekleyin

  <script src="js/map-api.js"></script>
  <script src="js/ng-map.js"></script>



www/template/map.html i tekrar düzenleyelim:


<ion-item>
<p>Bulundugum yer        A : ( x: {{mylat}} ,  y:{{mylon}})<p>
<p>hedef  B :( x: {{kx}} ,y:{{ky}} )</p>

</ion-item>

<ion-item>
  Şuanki Mesafe(metre):
  <input type="text" ng-model="mesafe=map.directionsRenderers[0].directions.routes[0].legs[0].distance.text" > </input>
</ion-item>

//distance text= uzaklığı metre turunden
// distance.value=uzaklıgı km turunden verir

<map center="[{{mylat}}, {{mylon}}]" zoom="14">

      <directions draggable="false"
                    panel="directions-panel"
                    ng-waypoints='ways'
                    origin="{{mylat}}, {{mylon}}"
                    destination="{{kx}}, {{ky}}">
        </directions>
  </map>



direction ile hedef yolu ile bizim konumumuzu çizdiriyoruz. bunun yerine sadece bir yeri işeretlemek istersek
  <marker position="[{{kx}}, {{ky}}]" title="Hedef" icon="/img/icon.png"></marker>
diyebiliriz. icon olarak birşey belirtmessek  default olarak kendi iconunu getirir.

$timer  kullanarak 5 sn yede veri alarak anlık yol takibi yaptırabilirsiniz

$ionic serve ile çalıştıralım
not: haritaların calışması için internete ihtiyac var