谷歌地图 - 如何确定点是否落入圆圈并绘制地图

时间:2015-08-10 16:36:02

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

我正在使用Angular,ng-maps指令和多个社交媒体API。首先,我从API检索数据,使用google.maps.geometry.spherical.computeDistanceBetween(latLng, center) <= radius this SO question(以及this one)中的 $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+']'); }); } 来计算搜索圈中的数据是否正确然后将其推入包含结果的数组中,然后将地图标记绘制到地图上。

由于数组为空,我似乎无法获得带有真值的任何内容。

以下是代码:

function butCalculate_onclick() {
try {
    if (window.top.calcFactorial == null)
        throw "This page is not loaded within the correct frameset";
    if (document.form1.txtNum1.value == "")
        throw "!Please enter a value before you calculate its factorial";
    if (isNaN(document.form1.txtNum1.value))
        throw "!Please enter a valid number";
    if (document.form1.txtNum1.value < 0)
        throw "!Please enter a positive number";
    else {document.form1.txtResult.value = window.parent.calcFactorial(document.form1.txtNum1.value);}
}
catch (exception) {
    if (typeof (exception) == "string") {
        if (exception.chartAt(0) == "!") {
            alert(exception.substr(1));
            document.form1.txtNum1.focus();
            document.form1.txtNum1.select();
        }
        else {
            alert(exception);
        }
    }
    else {
        alert("the following error occurred "+ exception.message);
    }
}

我想我错过了一些非常明显和简单的事情......关于问题是什么的任何想法?

修改 这是演示...... http://plnkr.co/edit/3rO8K1j8GVXd8JyBzvrm?p=preview

当我添加距离计算(注释掉)时,它不会向数组添加任何标记。

1 个答案:

答案 0 :(得分:0)

谢谢查理!我必须创建一个谷歌地图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