Question

我正在为我的应用程序使用angular-google-map。我设法得到我当前的位置和我想要的位置。我现在的问题是我想显示这两个位置之间的方向。请指导我如何实施方向。以下是我的代码。

地点的地图-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>

Answer 1

以下是显示地图上两点之间路线的代码。

HTML CODE

<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 CODE

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 ，开始和结束

使用angular-google-map in ionic实现谷歌地图方向

1 个答案: