AngularJS - 用圆圈向 ngMaps 添加步行距离答案

【问题标题】：AngularJS - Add walking distance to ngMaps with circleAngularJS - 用圆圈向 ngMaps 添加步行距离
【发布时间】：2017-03-10 10:41:07
【问题描述】：

我一直在努力实现类似于在this 网站上所做的事情。

到目前为止，我已经设法使用ngMaps 创建了一个带有圆圈的地图。以下是我到目前为止所做的sn-p...

谁能帮助我继续获取从标记到每个圆的半径线的步行距离？

谢谢 :)

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>

【问题讨论】：

标签： javascript angularjs google-maps google-maps-api-3 ng-map

【解决方案1】：

您有两点可以完成这项工作。

google.maps.geometry.spherical.computeOffset()

文档here。使用 computeOffset 函数获取点在圆边缘的纬度。

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

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

这是一个plunker。

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

剩下的事情就是在地图上向客户标签或标记显示距离和持续时间信息，祝你好运。

【讨论】：