2

私はthisウェブサイトで行われているようなことを達成しようとしてきました。AngularJS - 円でngMapsに歩く距離を追加する

これまでのところ、ngMapsを使用して円で地図を作成しました。 以下は私が今まで行ってきたことのスニペットです...

マーカーから円の半径線までの歩行距離の取得方法を教えてもらえますか?

感謝:)

var app = angular.module('mapApp', ['ngMap']); 
 
app.controller('mapCntrl', function($scope) { 
 
    $scope.geofences = [{ 
 
     "name": "circle", 
 
     "lat": 30.45, 
 
     "long": -91.15, 
 
     radius: 200 
 
    }, 
 
    { 
 
     "name": "circle", 
 
     "lat": 30.45, 
 
     "long": -91.15, 
 
     radius: 500 
 
    }, 
 
    { 
 
     "name": "circle", 
 
     "lat": 30.45, 
 
     "long": -91.15, 
 
     radius: 800 
 
    }, 
 
    { 
 
     "name": "circle", 
 
     "lat": 30.45, 
 
     "long": -91.15, 
 
     radius: 1000 
 
    } 
 
    ]; 
 
});
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Simple Map with circles</title> 
 
    <meta name="description" content="Simple Map"> 
 
    <meta name="keywords" content="ng-map,AngularJS,center"> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
 
    <script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script> 
 
    <script src="https://code.angularjs.org/1.3.15/angular.js"></script> 
 
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-app="mapApp" ng-controller="mapCntrl"> 
 
    <ng-map class=map zoom="15" center="[30.45, -91.15]"> 
 
    <marker position="[30.45, -91.15]" /> 
 
    <shape ng-repeat="fence in geofences" name="circle" radius="{{fence.radius}}" center="[{{fence.lat}}, {{fence.long}}]" /> 
 
    <control name="overviewMap" opened="true" /> 
 
    </ng-map> 
 
</body> 
 

 
</html>

答えて

1

あなたがこの作品を取得するための2つのポイントがあります。

  • google.maps.geometry.spherical.computeOffset()

    文書here。 computeOffset関数を使用して、円の端にポイントのlatlngを取得します。

    UPD:この点について 、あなたはまた、円上の特定のポイント(東、西、北、南)の緯度経度情報を取得するために)(circle.getBoundsを使用することができます。

  • google.maps.DistanceMatrixService().getDistanceMatrix()

    文書here。 getDistanceMatrixを使用して、中心点とエッジ点の間の歩行距離を取得します。

ここではplunkerです。

UPD2: カスタムマーカーでリンクしたウェブサイトに表示されているように、ウォーキングタイムを表示しています。

あなたの残りの部分は、地図上のカストムラベルやマーカーに距離や時間情報を表示しています。幸いです。

関連する問題