AngularJS

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 函数获取圆边上的点的经纬度。

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

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

这是一个plunker。

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

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

AngularJS - 将步行距离添加到带有圆圈的 ngMaps

AngularJS - Add walking distance to ngMaps with circle

javascript

google-maps

google-maps-api-3

ng-map