Bing MapsをWindows HTMLおよびJavaScriptアプリケーションに追加する方法。 パート2



こんにちは!

今日もBing Mapsの知人です。 前の記事では、マップをWindowsアプリケーションに追加する方法を理解し、マップ上のマークを操作する方法についても検討しました。

このパートでは、引き続き地図を改善し、GPS座標の決定、ルートの構築、交通情報の表示など、さまざまな便利な機能を追加します。


現在のユーザー座標を追加



ユーザーの現在の座標を地図に表示するために、Bing Maps SDKはGeoLocationProviderクラスを使用します。

GeoLocationProviderクラスでは次のメソッドを使用できます。


ユーザーの現在位置の表示を追加するには、 GeoLocationProviderオブジェクトを作成し、 getCurrentPositionメソッド使用してユーザーの現在位置特定し、マップにラベルを追加します。

function GpsBtn_Tapped() { map.entities.clear(); //  geoLocationProvider if (!geoLocationProvider) { geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map); } //    geoLocationProvider.getCurrentPosition({ successCallback: function (e) { map.entities.push(new Microsoft.Maps.Pushpin(e.center)); }, errorCallback: function (e) { //      var dialog = new Windows.UI.Popups.MessageDialog('Unable to locate you.', "GPS"); dialog.showAsync(); } }); } 

GPSマップにマークの座標を表示するか、単にマップの中心の座標を表示できます。 開始するには、HTMLファイルに要素を追加して座標を表示します。 次に、 viewchangeイベントハンドラーをGetMap関数に追加してから、緯度と経度の値をHTML要素に追加します。

 <span id='coordinateDisplay'"></span> 


 Microsoft.Maps.Events.addHandler(map, 'viewchange', function (e) { var center = map.getCenter(); document.getElementById('textBox').innerText = center.latitude.toFixed(5) + ',' + center.longitude.toFixed(5); }); 




:アプリケーションマニフェストで位置情報を定義する機能を追加する必要があります。 これを行うには、 package.appxmanifestファイルを開き、[ 機能 ]タブに移動して、[ 場所 ]ボックスをオンにします。



もちろん、座標を見つけたり、ユーザーの現在位置を表示したりする機能は便利ですが、他の興味深い可能性に移りましょう。たとえば、住所の操作方法を分析しましょう-オブジェクトを検索して地図に表示しましょう。

場所で検索を実施します



Bing Maps SDKは、 ジオコーディング(入力された住所を処理して地図上に表示するプロセス)を操作する機能を提供します。 逆ジオコーディングは逆の処理を行います-マップ上のポイントの座標を住所に変換します。 Bing MapsはSearchManagerクラスを使用して検索実装します

SearchManagerクラスでは次のメソッドを使用できます。

役職説明
ジオコード入力した住所を処理し、地図に表示します。 この場合、クエリ結果はコールバック関数に返されます。
reverseGeocodeマップ上のポイントの座標を住所に変換します。 この場合、クエリ結果はコールバック関数に返されます。
検索する指定されたクエリパラメータに基づいて検索を実行し、コールバック関数で結果を返します。

場所をジオコーディングするには、ジオクエリプロパティを含むオブジェクトをジオコードメソッドに渡す必要があります。 次のクエリパラメータプロパティが最も一般的に使用されます。

役職種類説明
コールバック機能ジオコードリクエストから結果が正常に返された場合に関数を呼び出すリクエスト。 コールバック関数は、引数としてGeocodeResultオブジェクトを受け取ります。
数える返される結果の最大数。 返される最大数は20です。
errorCallback機能要求から失敗が返された場合に関数を呼び出す要求。 コールバック関数は、ジオコードリクエストのプロパティを含むオブジェクトを受け取ります。
どこでひもマップにマップする住所または場所を含む文字列。

ユーザーが住所(またはその逆)で場所を特定する要求を入力すると、この要求はGeocodeModule関数によって処理されます。 実装には、 検索モジュールを使用します

ジオコーディングを実装するための一般的な計画は次のとおりです。


:Windowsストアアプリではアラートはサポートされていません。 警告の代わりに、 Windows.UI.Popups.MessageDialogクラスを使用します。

 function GeocodeModule() { ClearMap(); if (searchManager) { var request = { where: document.getElementById('searchTbx').value, count:1, callback: geocodeCallback, errorCallback: geocodeError }; searchManager.geocode(request); } else { // Search module   search manager. Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: function () { // search manager searchManager = new Microsoft.Maps.Search.SearchManager(map); //   GeocodeModule(); } }); } } function geocodeCallback(response, userData) { if (response && response.results && response.results.length > 0) { var r = response.results[0]; var l = new Microsoft.Maps.Location(r.location.latitude, r.location.longitude); //    var p = new Microsoft.Maps.Pushpin(l); map.entities.push(p); //    map.setView({ center: l, zoom : 15 }); } else { ShowMessage("Geocode Response", "Not results found."); } } function geocodeError(request) { ShowMessage("Geocode Error", "Unable to Geocode request."); } function ShowMessage(title, msg) { var m = new Windows.UI.Popups.MessageDialog(title, msg); m.showAsync(); } 




できた! これで、マップ上のオブジェクトを検索できます!
次に、ルートを扱い、開始点と終了点でルートを構築する方法を確認します。

地図にルートを追加



地図にルートを表示するには、ユーザーから開始地点と終了地点の住所を取得する必要があります(それぞれ地点Aと地点B)。 モジュールDirectionsモジュールを使用します

ルート案内モジュールを使用した作業計画は、ジオコーディングの使用に似ています。つまり、


routModeプロパティを使用して、計算されたルートのタイプ(運転、交通、徒歩)を選択できることに注意してください。

 function GetRoute() { ClearMap(); if (directionsManager) { //  Route Mode directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving }); //       var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: document.getElementById('fromTbx').value }); var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: document.getElementById('toTbx').value }); directionsManager.addWaypoint(startWaypoint); directionsManager.addWaypoint(endWaypoint); directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('itineraryDiv') }); //   directionsManager.calculateDirections(); } else { //  directions module   directions manager. Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: function () { // directions manager directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map); //  GetRoute(); } }); } } 



これで、パスがマップに表示され、最適な(最短距離の)パスに関する情報とヒントが左側に表示されました。
ルートの計算に加えて、ユーザーは現在の交通状況に関する情報、つまり交通渋滞や交通事故に興味があるかもしれません。 そして、あなたは彼にこの情報を提供することができます。 方法を見てみましょう。

地図に交通情報を追加する



Bing Maps SDKでは、地図上に交通流の速度(交通渋滞)の写真を表示し、交通事故のマークを追加することができます。 交通量の速度に関する情報は、流量に応じて異なる色で道路を強調表示することで表示されます。 交通事故は地図上にタグとして表示されます。
交通情報を操作するには、次の方法を使用できます。

種類説明
getIsOnブール値交通情報を表示するかどうかを決定するブール値を返します。
隠すすべての交通情報を非表示にします。
hideFlow交通速度情報を非表示にします。
hideIncidents交通事故に関する情報を非表示にします。
hideLegendトラフィックフローの凡例を非表示にします。
見せるすべての交通情報を表示します。
showFlowトラフィックフロー情報を表示します。
showIncidents交通事故に関する情報を表示します。
showLegendトラフィックストリームの凡例を表示します。

 function ToggleTrafficBtn_Tapped() { map.entities.clear(); if (trafficManager) { if (trafficManager.getIsOn()) { trafficManager.hide(); } else { trafficManager.show(); } } else { // ,        , //    . Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', { callback: function () { trafficManager = new Microsoft.Maps.Traffic.TrafficManager(map); ToggleTrafficBtn_Tapped(); } }); } } 

これで、マップに交通流の速度の写真が表示されます。 すべての交通渋滞を回避する旅行を計画できます。



まとめ



マップを操作するための本格的なアプリケーションを入手しました。このアプリケーションを使用すると、住所で必要な場所をマップ上で見つけてルートを構築したり、交通状況に関する情報を見つけて最適なルートを選択したりできます。 Bing Maps SDKにはさらに多くの機能があり、残りの記事を読んでアプリケーションをアップグレードしてください!

サイトリンク


Bingマップデベロッパーセンター
Windows 8.1ストアアプリ用のBing Maps SDK
MSDNのBing Maps
Bing Mapsビデオ
Web開発者向けのMVAモバイル開発コース
無料または試用版のVisual Studioをダウンロードする
Microsoft Azureをお試しください
Microsoft Virtual Academyコースを学ぶ

Source: https://habr.com/ru/post/J245831/


All Articles