谷歌地图 - 如何确定点是否落在一个圆圈上并绘制地图答案

【问题标题】：Google Maps - How to determine if point falls with a circle and plot to map谷歌地图 - 如何确定点是否落在一个圆圈上并绘制地图
【发布时间】：2015-08-10 16:36:02
【问题描述】：

我正在使用 Angular、ng-maps 指令和多个社交媒体 API。首先，我从 API 中检索数据，使用从this SO question（以及this one）获得的google.maps.geometry.spherical.computeDistanceBetween(latLng, center) <= radius 计算它是否在搜索圈中，然后将其推入包含结果的数组中，然后将地图标记绘制到地图上。

由于数组为空，我似乎无法得到任何返回值为真值的东西。

代码如下：

  $scope.radius = 1000;
    $scope.lat = 48.0028;
    $scope.lng = 37.8060; 

$scope.searchCircle = {
        position: [$scope.lat, $scope.lng],
        radius: $scope.radius
    };

$scope.mapSearch = function(){
            if ($scope.vkLoading || $scope.igLoading || $scope.twtLoading) return;
            $scope.resultPosts.length = 0;
            console.log('Lat: '+$scope.lat+' Lng: '+$scope.lng+' Radius: '+$scope.radius+' Start: '+$scope.startDate+' End: '+$scope.endDate);
            if ($scope.locationSearch.dataSource.vk){
                $scope.vkLoading = true;
                console.log('search Vk');
                OSINTAPIRequest.vkSearch($scope.lat, $scope.lng, $filter('unixTimestamp')($scope.startDate, 'sec'), $filter('unixTimestamp')($scope.endDate, 'sec'),$scope.radius).then(function(data){
                        if (data.error){
                            toastr.error(data.error.error_msg, 'VkError['+data.error.error_code+']');
                        } else {
                            if (data.response.items.length > 0){
                                for(var i=0; i < data.response.items.length; i++){
                                    /*  Adjust for faulty radius */

                                $scope.markerPoints = [];

                                    $scope.postLat = data.response.items[i].lat;
                                    $scope.postLng = data.response.items[i].long;
                                    $scope.postLatLng = [$scope.postLat,$scope.postLng];

                                    $scope.markerPoints.push($scope.postLatLng);

                                     if (google.maps.geometry.spherical.computeDistanceBetween($scope.markerPoints, $scope.searchCircle.position) <= $scope.radius) {
                                            $scope.resultPosts.push({SourcePostID: data.response.items[i].id, 
                                                    SourcePosterID : data.response.items[i].owner_id,
                                                    Timestamp : parseInt(data.response.items[i].date),
                                                    PostTitleTimestamp: $filter('timestamp')(data.response.items[i].date, 'title'),
                                                    PostTimestamp : $filter('timestamp')(data.response.items[i].date),
                                                    PostLatitude : data.response.items[i].lat,
                                                    PostLongitude : data.response.items[i].long,
                                                    PostMedia: data.response.items[i].photo_604,
                                                    PostContent: data.response.items[i].text,
                                                    PostType: 'image',
                                                    PostAvatar: 'https://pingendo.github.io/pingendo-bootstrap/assets/user_placeholder.png',
                                                    PostMarker: 'assets/img/vkMarker.png',
                                                    PostUsername : 'User ID ('+data.response.items[i].owner_id+')',
                                                    DataSource: 'vk'});
                                        //console.log('Vk Timestamp: '+parseInt(data.response.items[i].date));
                                    } 

                            } else {
                            }
                            $scope.vkLoading = false;
                        }
                    }, function(error){
                        $scope.vkLoading = false;
                        console.log(error);
                        toastr.error('Unable to connect to server!','Server Error['+error.status+']');
                });
            }

我认为我遗漏了一些非常明显和简单的东西......关于问题是什么的任何想法？

编辑： 这是演示...http://plnkr.co/edit/3rO8K1j8GVXd8JyBzvrm?p=preview

当我添加距离计算（注释掉）时，它不会向数组添加任何标记。

【问题讨论】：

这里有太多未知数。创建一个复制问题的演示
也许我包含了太多的代码。我想真正的问题是如何通过推动 lat long 来正确实施` if (google.maps.geometry.spherical.computeDistanceBetween($scope.markerPoints, $scope.searchCircle.position)
computeDistanceBetween 评估为什么？我们不知道条件是否满足。 OSINTAPIRequest.vkSearch 也是使用 $http 还是第三方 api？如果不在角度范围内，则需要$apply()
computeDistanceBetween 计算两个纬度 lngs (developers.google.com/maps/documentation/javascript/…) 之间的距离，然后我将其与半径 (
如果我删除包含计算的 if 语句，所有内容都会被推送到结果数组并按预期绘制。但是当我添加语句时，它没有显示出来。我正在尝试创建一个演示。

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

【解决方案1】：

谢谢查理！我必须创建一个谷歌地图 LatLng 对象并将其传递给函数。

var p1 = new google.maps.LatLng(data[i].lat, data[i].long);
var p2 =  new google.maps.LatLng($scope.lat, $scope.lng);

这是有效的解决方案：http://plnkr.co/edit/u8ihWual5xsivkHJyu3y?p=preview

【讨论】：