文章/答案/技术大牛

发布

社区首页 >问答首页 >AngularJS -将步行距离添加到带圆圈的ngMaps中

问AngularJS -将步行距离添加到带圆圈的ngMaps中
EN

Stack Overflow用户

提问于 2017-03-10 10:41:07

回答 1查看 308关注 0票数 2

我一直在努力实现在http://www.workspace.co.uk/workspaces/canalot-studios/area-guide网站上所做的事情。

到目前为止，我已经成功地使用https://ngmap.github.io/创建了一个带有圆圈的映射。下面是我迄今为止所做的事情的片段.

有人能帮我得到从标志到每个圆圈半径线的步行距离吗？

谢谢:)

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>

angularjs

google-maps

google-maps-api-3

ng-map

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-03-15 09:21:17

有两点你可以得到这份工作。

google.maps.geometry.spherical.computeOffset() 文档这里。使用computeOffset函数获取圆周边缘点的锁定。 UPD:对于这一点，您还可以使用circle.getBounds()获取圆周上特定点(东、西、北、南)的拉丁信息。
google.maps.DistanceMatrixService().getDistanceMatrix() 文档这里。使用getDistanceMatrix获取中心点和边缘点之间的步行距离。

这是一个柱塞。

UPD2:，我在你用自定义标记链接的网站上显示了步行时间。

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42716348

复制

相似问题

问AngularJS -将步行距离添加到带圆圈的ngMaps中
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS -将步行距离添加到带圆圈的ngMaps中EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS -将步行距离添加到带圆圈的ngMaps中
EN