Bing Maps API

Bing Maps API

Bing Map API를 받기 위해 다음의 사이트로 이동하자

https://www.microsoft.com/maps/Default.aspx

메뉴에서 Get Started를 선택한다.

가운데 부분에 Basic Key 버튼을 누른다.

하단 부에 Get the Basic Key를 누른다.

다음의 bingmapsportal 웹 사이트로 이동하여 개발자 등록을 한다

https://www.bingmapsportal.com/

Sign in 버튼을 누른다.

Microsoft 사의 계정으로 로그인 한다. 계정이 없을 경우 가입을 합시다!

로그인을 하고 Yes버튼을 누릅니다.

간략한 개인정보(이름, 연락처, 이메일)를 입력합시다. 이후에 Create버튼을 누릅니다.

생성이 되고 난 이후의 화면입니다.

자 이제 우리는 탭 메뉴에서 My account 메뉴의 My Key를 들어가 키를 발급 받을 것입니다.

키를 생성하기 위해 Application 이름과 url과 앱 정보를 기입합니다.

Create버튼을 누르고 나면 하단 부에 Key가 발급됩니다.

Key를 이용해볼까요

스마트 미러에 적용해보았습니다.

Traffic-service.js

(function() {

  'use strict';

  function TrafficService($http, $q) {

      var service = {};

      var duration = null;

      var BING_MAPS = "http://dev.virtualearth.net/REST/V1/Routes/"

      service.getTravelDuration = function(){

        var deferred = $q.defer();

       

        // Request traffic info for the configured mode of transport

        $http.get(getEndpoint(config.traffic.mode))

        .then(function(response){

          // Walking and Transit are "not effected" by traffic so we don't use their traffic duration

          if(config.traffic.mode == "Transit" || config.traffic.mode == "Walking"){

              deferred.resolve(moment.duration(response.data.resourceSets[0].resources[0].travelDuration, 'seconds'));

          } else {

              deferred.resolve(moment.duration(response.data.resourceSets[0].resources[0].travelDurationTraffic, 'seconds'));

          }

        }, function(error) {

          // Most of the time this is because an address can't be found

          if (error.status === 404) {

            console.error('No transit information available between start and end');

            deferred.reject('Unavailable');

          } else {

            console.error(error.statusText);

            deferred.reject('Unknown error');

          }

          duration = deferred.promise;

        });

        return deferred.promise;

      };

     

      // Depending on the mode of transport different paramaters are required.

      function getEndpoint(mode){

          var endpoint = BING_MAPS + mode + "?wp.0=" + config.traffic.origin + "&wp.1="+config.traffic.destination;

          if(mode == "Driving"){

              endpoint += "&avoid=minimizeTolls";

          } else if(mode == "Transit"){

              endpoint += "&timeType=Departure&dateTime=" + moment().format('h:mm:ssa').toUpperCase();

          } else if(mode == "Walking"){

              endpoint += "&optmz=distance";

          }

          endpoint += "&key=" + config.traffic.key;

         

          return endpoint;

      }

      return service;

  }

  angular.module('SmartMirror')

      .factory('TrafficService', TrafficService);

}());

Control.js

var refreshTrafficData = function() {

TrafficService.getTravelDuration().then(function(durationTraffic) {

console.log("Traffic", durationTraffic);

$scope.traffic = {

                      name:config.traffic.name,

                      origin: config.traffic.origin,

                      destination : config.traffic.destination,

                      hours : durationTraffic.hours(),

                      minutes : durationTraffic.minutes()

};

              }, function(error){

                  $scope.traffic = {error: error};

});

};

index.html

<span class="time-to"> 이동 정보 {{traffic.name}}</span></br>

<span>{{traffic.origin}}에서 {{traffic.destination}}</span></br>

<span ng-show="traffic.hours > 0">{{traffic.hours}} hours and</span>

<span>{{traffic.minutes}} minutes</span>