Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/google-maps/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在中间循环编号上使用最终循环值_Javascript_Google Maps_Loops_Google Maps Api 3_Latitude Longitude - Fatal编程技术网

Javascript 在中间循环编号上使用最终循环值

Javascript 在中间循环编号上使用最终循环值,javascript,google-maps,loops,google-maps-api-3,latitude-longitude,Javascript,Google Maps,Loops,Google Maps Api 3,Latitude Longitude,我希望这个标题能让人理解。我有一个比较两个值的函数,其中一个是第一个值的所有值的平均值 基本上,我想找出n个标记的长的、横向的和一个中心标记之间的距离。我有一个循环,它将我的“results”变量推送到一个数组,在循环的末尾,找到一个平均Lat,Long,它创建了一个中心点。问题是,我想找出每个“结果”和中心点之间的距离,但在循环中间,平均标记尚未确定 解释比展示更难;我在这里设置了一个演示;要了解我的意思,请单击结果窗格中的更新按钮:。你会看到的 来自加利福尼亚的圆圈是正确的,因为它是最后一个

我希望这个标题能让人理解。我有一个比较两个值的函数,其中一个是第一个值的所有值的平均值

基本上,我想找出n个标记的长的、横向的和一个中心标记之间的距离。我有一个循环,它将我的“results”变量推送到一个数组,在循环的末尾,找到一个平均Lat,Long,它创建了一个中心点。问题是,我想找出每个“结果”和中心点之间的距离,但在循环中间,平均标记尚未确定

解释比展示更难;我在这里设置了一个演示;要了解我的意思,请单击结果窗格中的更新按钮:。你会看到的 来自加利福尼亚的圆圈是正确的,因为它是最后一个圆圈(找到了完整的平均点)。来自纽约的圆圈被划为半圈,因此有一个不完整的平均标记要测量

My Javascript(问题集中在“标记”部分:

//全局变量
var gMapAPIKey='AIzaSyBUlnM6c7LqCR79UM9mTKvSNK6V7gzKsmE';
var namearray=document.getElementsByName(“名称”);
var form=document.getElementById(“addressform”);
var addBtn=document.getElementById(“addperson”);
//谷歌地图API脚本
var streetaray=document.getElementsByName(“street”);
var cityarray=document.getElementsByName(“城市”);
var地理编码器;
var映射;
var结果;
var mapArray=新数组();
var-AvgLat=0;
var-AvgLng=0;
var j;
var newLatLng;
动态变异;
函数初始化(){
geocoder=新的google.maps.geocoder();
var latlng=新的google.maps.latlng(-34.397150.644);
变量映射选项={
缩放:3,
//以德克萨斯州卡罗尔顿为中心——更改lat、long值以更改初始地图区域
中心:新google.maps.LatLng(32.999173,-96.897413)
}
//将Id引用更改为包含google地图的div/容器
map=new google.maps.map(document.getElementById('map'),mapOptions);
}
函数代码地址(){
//通过循环并合并街道和城市值,查找所有字段的长纬度值
对于(var cName=0;cName
我的第一个想法是,您不局限于只循环一次数据。在循环数据之后,数据仍然会在那里(除非您在此过程中更改或销毁数据)

因此,您将使用两个循环

第一个循环计算中心点

第二个循环计算到该点的所有距离

但当我查看您的代码时,我发现其中有更多的内容

在您迭代
namearray
的主循环中,循环为此数组的每个元素调用
geocoder.geocode()
。然后在geocoder回调中完成工作

有趣的是,这段代码实际上根本不是主循环的一部分,它出现在主循环中,但调用它的时间要晚得多,因为地理代码的响应会一个接一个地返回

因此,让我们假设地理编码中没有错误(错误的假设,但我们将使用它运行一会儿)。您的geocoder回调已将每个地理编码结果推送到
mapArray
。因此,您可以
//GLOBAL VARIABLES
var gMapAPIKey = 'AIzaSyBUlnM6c7LqCR79UM9mTKvSNK6V7gzKsmE';
var namearray = document.getElementsByName("name");
var form = document.getElementById("addressform");
var addBtn = document.getElementById("addperson");


//GOOGLE MAPS API SCRIPTS
var streetarray = document.getElementsByName("street");
var cityarray = document.getElementsByName("city");
var geocoder;
var map;
var results;
var mapArray = new Array();
var AvgLat = 0;
var AvgLng = 0;
var j;
var newLatLng;
var dynamicRadius;




function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
    zoom: 3,
    //centered on Carrollton, Texas -- Change lat,long values to change initial map area
    center: new google.maps.LatLng(32.999173, -96.897413)
}
//change Id reference to the div/container that contains the google map
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}

function codeAddress() {
//Loop through and concate street and city values to find long,lat values for all fields
for (var cName = 0; cName < namearray.length; cName++) {
    var address = streetarray[cName].value + cityarray[cName].value;

    //start geocode copy  & paste text from API reference
    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var results = results[0].geometry.location;
            map.setCenter(results);
            console.log(results);
            var marker = new google.maps.Marker({
                map: map,
                position: results,

            });
            //Push lng/lat locations to the mapArray and find AvgLat/Lngs
            mapArray.push(results);
            var j = mapArray.length;
            AvgLat = (AvgLat + results.lat());
            AvgLng = (AvgLng + results.lng());

            console.log(mapArray, AvgLat, AvgLng, j)

            //Begin Marker Scripts

            var markerCircle = new google.maps.Circle({
                center: results,
                radius: 15000,
                strokeColor: "#0000FF",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#0000FF",
                fillOpacity: 0.4


            })
            var centerLocation = {
                    lat: AvgLat / j,
                    lng: AvgLng / j,
                }

           var newLatLng = new google.maps.LatLng(centerLocation.lat,     centerLocation.lng);
           var dynamicRadius = google.maps.geometry.spherical.computeDistanceBetween     (results, newLatLng);
            if (j == namearray.length) {

            markerCircle.setRadius(dynamicRadius*1.15)                    
                map.setCenter(newLatLng);
                var centerMarker = new google.maps.Marker({
                    position: newLatLng,
                    map: map,
                    title: "Center Marker",
                })
                var centerCircle = new google.maps.Circle({
                    center: newLatLng,
                    radius: 15000,
                    strokeColor: "#0000FF",
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: "#0000FF",
                    fillOpacity: 0.4,
                    map: map,
                })


            }
            markerCircle.setRadius(dynamicRadius*1.15)
            markerCircle.setMap(map);


        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });


}
}

//Initialize the first map on load -- When form is submitted geocode addresses and   places markers on the map
google.maps.event.addDomListener(window, 'load', initialize);
form.addEventListener("submit", codeAddress, false);
 addBtn.addEventListener("click", addPerson, false);
    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            mapArray.push({ latLng: results[0].geometry.location });
            AvgLat += results.lat();
            AvgLng += results.lng();
        } else {
            mapArray.push({ error: status });
            ++nErrors;
        }

        // Might want to update a progress indicator here
        // if the geocoding takes a while?

        if( mapArray.length == namearray.length ) {
            // Everything is geocoded, now get to work
            drawMap();
        }
    });
function drawMap() {
    if( nErrors ) {
        // complain about error
        return;
    }

    var center = {
        lat: AvgLat / j,
        lng: AvgLng / j,
    };
    map.setCenter( new google.maps.LatLng( center.lat, center.lng ) );

    for( var i = 0;  i < mapArray.length;  i++ ) {
        // Create marker and draw circle here
    }
}
var bounds = new google.maps.LatLngBounds;
            AvgLat += results.lat();
            AvgLng += results.lng();
            bounds.extend( results );
    var center = {
        lat: AvgLat / j,
        lng: AvgLng / j,
    };
    map.setCenter( new google.maps.LatLng( center.lat, center.lng ) );
    map.fitBounds( bounds );
    var center = bounds.getCenter();