行きたいところマップ　その20

つむりん🍚UGOK
2020/11/04 03:17

今回進めたこと
・現在地からの登録地点の絞り込み（未完）

■ 現在地からの登録地点の絞り込み

現在地から、自分が登録した場所の地点を絞り込みできるプログラムを実装中です。今のところ、登録した場所は、マップ上でピンが表示されている状態ですが、
これを「現在地からの距離（50m, 100mなど）」によって絞り込みができるようにしたいと思っています。

しかし、想定よりも実装が難しくなってしまったので、あれやこれやといろいろ試してみた結果を載せます。

◇ 現在地を中心とした円を表示させる

マップ上に現在地を中心とした円を表示させるプログラムです。半径を指定することで、円を描くことができます。（画像では、現在地ではなく、大阪駅を中心とした円になっています。）

let CircleS = new google.maps.Circle({
           center: new google.maps.LatLng(34.7024, 135.4959), // 中心点
           fillColor: '#52a4eb',
           fillOpacity: 0.25, // 透明度
           radius: 10000, // 半径（ｍ）
           strokeColor: '#006cff', // 外周色
           strokeOpacity: 1, // 外周透過度
           strokeWeight: 1 // 外周太さ（ピクセル）
         });

マップ上に描かれた円の中にあるピンをユーザーに把握させ、各地点が現在地からどのくらい離れているかを知らせることができます。

しかし、これでは、「絞り込み」になっていない…ので保留。

◇ APIを使って、現在地と各地点の距離を計測

先程の、「現在地を中心とした円を表示する」では、絞り込みができないので、別の方法を試してみることにしました。

それが、「Distance Matrix API」です。これは、複数地点の所要時間と距離を産出してくれるAPIです。

現在利用している「Maps JavaScript API」は、２点間の距離を求めることはできるのですが、複数地点の距離を求めるとなると、「Distance Matrix API」の方が１度の呼び出して計算できるので、利用することにしました。

let distanceMatrixService = new google.maps.DistanceMatrixService();

         // 出発点
         let origns = [
　　　　       new google.maps.map.LatLng(緯度,経度),
　　　　       new google.maps.map.LatLng(緯度,経度)
         ];
         // 到着点
         let destinations = [
           new google.maps.map.LatLng(緯度,経度)
         ];

         distanceMatrixService.getDistanceMatrix({
           origins: origns, // 出発地点
           destinations: destinations,
           travelMode: 'WALKING', // 徒歩モード（時間と距離の計算は、徒歩で計測）
         }, function(response, status) {
           let self = this;
           if (status == google.maps.DistanceMatrixStatus.OK) {
             let origins = response.originAddresses;
             let destinations = response.destinationAddresses;

             for (let p = 0; p &lt; origins.length; p++) {
               // 出発地点から到着地点への計算結果を取得
               let results = response.rows[p].elements;

               for (var j = 0; j &lt; results.length; j++) {
                 let from = origins[p]; // 出発地点の住所
                 let to = destinations[j]; // 到着地点の住所
                 self.duration = results[j].duration.value; // 時間
                 self.distance = results[j].distance.value; // 距離
                 console.log('出発地点：', from, '到着地点：', to, '時間：', duration + '秒', '距離：', distance + 'm');
               }
             }
           }
         });