Question

我一直在努力实现像this网站中所做的那样。

到目前为止，我已设法使用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>

Answer 1

有两点可以帮助你完成这项工作。

google.maps.geometry.spherical.computeOffset()

文件here。使用computeOffset函数获取圆的边缘上的点的latlng。

<强> UPD：对于这一点，您还可以使用circle.getBounds（）来获取圆上特定点（东，西，北，南）的Latlng信息。
<强> google.maps.DistanceMatrixService().getDistanceMatrix()

文件here。使用getDistanceMatrix获取中心点和边缘点之间的步行距离。

这是plunker。

<强> UPD2：我已经显示了您使用自定义标记链接的网站上显示的步行时间。

其余为你todo显示地图上的客户标签或标记的距离和持续时间信息，祝你好运。

AngularJS - 使用圆圈添加到ngMaps的步行距离

1 个答案: