Реализовать маршруты карты Google, используя угловую карту google в ионной

Я использую угловую карту Google для своего приложения. Мне удается найти свое текущее местоположение и мое желаемое местоположение. Моя проблема теперь в том, что я хотел показать направление между этим двумя местоположениями. Прошу вас проинструктировать о том, как реализовать направление. Ниже мой код.Реализовать маршруты карты Google, используя угловую карту google в ионной

местоположения на карте-ctrl.js

(function() { 
    'use strict'; 

    angular.module('eliteApp').controller('LocationMapCtrl', ['$stateParams', 'eliteApi', LocationMapCtrl]); 

    function LocationMapCtrl($stateParams, eliteApi) { 
     var vm = this; 

     vm.location_id = Number($stateParams.id); 

     vm.map = { 
      center: { 
       latitude: 38.897677, 
       longitude: -77.036530, 
      }, 
      zoom: 12, 
      control: { }, 
     }; 
     vm.marker = { }, 

     eliteApi.getLeagueData().then(function(data){ 

      vm.location = _.find(data.locations, { id: vm.location_id }); 
      vm.marker = { 
       latitude: vm.location.latitude, 
       longitude: vm.location.longitude, 
       title: vm.location.name + "<br/>(Tap for directions)", 
       showWindow: true 
      }; 

      vm.map.center.latitude = vm.location.latitude; 
      vm.map.center.longitude = vm.location.longitude; 

     } ); 

     vm.locationClicked = function(marker){ 

      navigator.geolocation.getCurrentPosition(function(pos) { 
      // vm.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); 

      }, function(error) { 
       alert('Unable to get location: ' + error.message); 
      }); 
     }; 
    }; 
})();

местоположения map.html

<ion-view title="{{vm.location.name}}" ng-controller="LocationMapCtrl as vm"> 
    <ion-content class="has-header"> 
    <google-map draggable="true" center="vm.map.center" zoom="vm.map.zoom"> 
     <marker coords="vm.marker" click="vm.locationClicked(vm.marker)"> 
      <marker-label content="vm.marker.title" anchor="10 -8" class="marker-labels"></marker-label> 
     </marker> 
    </google-map> 
    </ion-content> 
</ion-view>

источник

2015-03-30 Roshan

Ниже код, чтобы показать маршрут между двумя точками на карте.

HTML КОД

<body ng-app="starter"> 

    <ion-pane> 
     <ion-header-bar class="bar-stable"> 
     <h1 class="title">Ionic Blank Starter</h1> 
     </ion-header-bar> 
     <ion-content ng-controller="locationController">   
      <div id="googleMap" style="width:100%;height:380px;" name="googleMap"></div>      
     </ion-content> 
    </ion-pane> 
    </body>

JS КОД

var exampleApp=angular.module('starter', ['ionic']) 

.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
    // for form inputs) 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
    } 
    if(window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }); 
}); 

var directionsDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 
    function initialize() 
    { 
     directionsDisplay = new google.maps.DirectionsRenderer(); 
     var inticor= new google.maps.LatLng("Your Lat Long here"); 
     var mapOptions = 
       { 
        zoom: 9, 
        center: inticor, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
       }; 

     map = new google.maps.Map(document.getElementById('googleMap'), mapOptions); 
     directionsDisplay.setMap(map);  
     calcRoute(); 

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

function calcRoute() { 
    var start = "your start latlng here"; 
    var end = "your destinationl latlng here"; 
    var request = { 
     origin:start, 
     destination:end, 
     travelMode: google.maps.TravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
    } 
    }); 
}

Этот код будет загружать карту, а также в запуске и конец LatLong установить маршрут на карте.

Не забудьте инициализировать значение переменной inticor, начать и конец

источник

2015-03-30 06:38:36

Спасибо. Мог бы объяснить мне, как реализовать в моем коде? – Roshan

Реализовать маршруты карты Google, используя угловую карту google в ионной

ответ

Смежные вопросы