javascript - JavaScript 中的范围错误，与函数相关

Question

这个问题已经有答案了:

Difference between ( for... in ) and ( for... of ) statements? (20 个回答)

已关闭 5 年前。

理论上，下面的代码可以比较我集成到网站中的所有 Google Maps API 书签，其中自定义书签的半径为 750 米，我正在尝试计算半径并了解它们是否重叠，并且为此，我一直在互联网上搜索并增加了基本的 APIv3 代码以及用于计算的 javascript 函数代码，以检查标记的光线是否相交。

直到 map View 部分，显示了数据库表中注册的地址中的标记(总共 110 个)加上地址保留地址(总共 5 个)，但是在 setMarkers() 函数的末尾；我通过调用另一个函数 hasIntersections(); 来增加 for in 的值。函数，然后“错误”发生。

由于我是 javascript 的初学者，我不知道如何修复，在控制台中显示的错误是，位于 hasIntersections() 函数中；

"Uncaught TypeError: circle0.getCenter is not a function"

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXX">
</script>

<script>
var geocoder;
var map;
var marker;
var image = 'https://www.keepidea.com.br/painel/assets/images/mark-teste.png';

var locations2 = [['RESERVA: ', -23.9446791, -46.3264323, 'Av. Senador Feijó, 421 - Vila Nova, Santos - SP, 11013-162, Brasil'],['RESERVA: ', , , 'R. Assunção, 414 - Sion, Belo Horizonte - MG, 30320-040, Brasil'],['RESERVA: ', , , 'R. Padre Feijó, 373 - Vila Tiberio, Ribeirão Preto - SP, 14050-360, Brasil'],['RESERVA: ', -23.0654964, -47.2263359, 'R. Vitoriano Salut, 72 - Chácara Belvedere, Indaiatuba - SP, Brasil'],['RESERVA: ', -20.8873894, -47.5997438, 'Rua Ana Luiza, 197 - Bairro Castelo, Batatais - SP, 14300-000, Brasil']];

var locations = [['Vila Osasco', -23.544559, -46.781034, 'Avenida Santo Antônio, 2761, Vila Osasco,  - SP, 06083-215, Brasil'],['Rebouças', -22.8904057, -43.5603237, 'Avenida Rebouças, 3657, Centro,  - SP, 13170-023, Brasil'],['Nutrition Bauru', -22.3370765, -49.0891827, 'Avenida Castelo Branco, 7-15, Vila Independência,  - SP, 17052-000, Brasil'],['Pitangueiras', -23.2022764, -46.8836439, 'Rua Pitangueiras, 790, Jardim Pitangueiras,  - SP, 13206-716, Brasil'],['Vale do Sol', -20.4229151, -49.9592271, 'Avenida pansani, 3092, Vale do sol,  - SP, 15500-302, Brasil'],['Cidade Nova Montes Claros-Mg', -16.739527, -43.8653989, 'Avenida Dona Gregória, 101, Cidade Nova,  - MG, 39400-464, Brasil'],['Centro Salto', -23.199741, -47.3008818, 'Avenida Dom Pedro II, 1421, Centro,  - SP, 13320-241, Brasil'],['ASSIS', -22.6575047, -50.397561, 'Rua Antônio da Silva Cunha Bueno, 425, Jardim Paulista,  - SP, 19815-080, Brasil'],['Paulinia', -22.743178, -47.1744984, 'Avenida João Aranha, 946, Alto de Pinheiros,  - SP, 13145-256, Brasil'],['SBC Centro', -23.7132318, -46.5532384, 'Rua Joaquim Nabuco, 56, Centro,  - SP, 09720-375, Brasil'],['Chácara', -23.6290144, -46.7025941, 'Rua da paz, 1498, Chácara Santo Antônio,  - SP, 04713-000, Brasil'],['Nova Europa', -22.9424831, -47.0573369, 'Avenida Baden Powell, 1831, Nova Europa,  - SP, 13040-093, Brasil'],['Morada do Sol', -23.1269188, -47.244239, 'Rua João Martini, 475, Jardim Morada do Sol,  - SP, 13348-350, Brasil'],['Campo grande RJ', -22.890374, -43.560187, 'Rua do petróleo, 14, Campo Gande,  - RJ, 23087-125, Brasil'],['Tremembé', -23.4587589, -46.6149244, 'Avenida Nova Cantareira, 4794, Tucuruvi,  - SP, 02340-002, Brasil'],['Vila das Belezas', -23.6491279, -46.7543918, 'Estrada de Itapecerica, 2219, Vila das Belezas,  - SP, 05835-005, Brasil'],['CCentro', -23.0854053, -47.2105986, 'Rua Humaitá, 1099, Centro,  - SP, 13339-140, Brasil'],['ITAPECERICA', -23.698334, -46.8527042, 'Rua Ari Batalha, 393, Parque Paraiso,  - SP, 06850-335, Brasil'],['lapa', -23.5250071, -46.6872423, 'Rua Clélia, 911, Lapa,  - SP, 05042-000, Brasil'],['Interação Flamboyant', -17.7718674, -48.6186493, 'Rua B-02, S/N, Estância Itanhanga,  - GO, 75690-000, Brasil'],['Tatuapé', -23.552282, -46.5566401, 'Rua Francisco Marengo, 1717, Tatuapé,  - SP, 03313-001, Brasil'],['Flamboyant', -22.8762222, -47.0358206, 'Rua Comendador Doutor Antônio Pompeo Camargo, 104, Jardim Boa Esperança,  - SP, 13091-502, Brasil'],['N.Sr de Fatima', -22.8975439, -47.1685964, 'Armelinda Espúrio da Silva, 565, Jardim Nossa Senhora de Fátima,  - SP, 13084-450, Brasil'],['Agapeama', -23.2053398, -46.8651296, 'Rua da Varzea Paulista, 487, Vila Agricola,  - SP, 13202-700, Brasil'],['Buriti', -23.2230818, -46.8760877, 'Rua Dom Pedro I, 462, Jardim Buriti,  - SP, 13225-790, Brasil'],['BOA VISTA', -14.8793362, -40.832031, 'Avenida Gilenilda Alves, 1345, Boa Vista,  - BA, 45027-560, Brasil'],['FABRICA DE RESULTADOS', -23.6008617, -46.8988726, 'Rua Pinhal, 83, Jardim Sabia,  - SP, 06716-575, Brasil'],['Valentina Cross Life',-16.7287284, -43.8835938, 'Rua Espírito Santo Esplanada, 395, Esplanada,  - MG, 39401-452, Brasil'],['PEDRO PINHO', -23.5402247, -46.8010548, 'Avenida General Pedro Pinho, 1052, Pestana,  - SP, 06122-160, Brasil']];

function initMap()
{
    var latlng = new google.maps.LatLng(-84.568808, -100.418683);
    var options = {
        zoom: 4,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("mapa"), options);
    geocoder = new google.maps.Geocoder();
    marker = new google.maps.Marker({
        map: map,
        zoom: 4
    });
    marker.setPosition(latlng);
    setMarkers(map,locations);
    setMarkers(map,locations2);
}

Number.prototype.toRadians = function() {
    return this * (Math.PI / 180.0);
};

function distance(lat0, long0, lat1, long1)
{
    var rlat0 = lat0.toRadians();
    var rlong0 = long0.toRadians();
    var rlat1 = lat1.toRadians();
    var rlong1 = long1.toRadians();
    var deltaLat = (rlat1-rlat0);
    var deltaLong = (rlong1-rlong0);
    var a = Math.pow(Math.sin(deltaLat / 2), 2) + Math.pow( Math.sin(deltaLong / 2), 2) * Math.cos(rlat0) * Math.cos(rlat1);  
    return (2 * Math.asin(Math.sqrt(a))) * 6378137;
}

function hasIntersections(circle0,circle1)
{
    var center0 = circle0.getCenter();
    var center1 = circle1.getCenter();
    var maxDist = circle0.getRadius()+circle1.getRadius();
    var actualDist = distance(center0.lat(),center0.lng(),center1.lat(),center1.lng());
    return maxDist>=actualDist;
}

circles = [];
circles2 = [];
circle = null;
circle2 = null;

function setMarkers(map,locations)
{

    var marker = null;
    var i = null;

    for (i = 0; i < locations.length; i++)
    {
        var loan = locations[i][0]
        var lat = locations[i][1]
        var long = locations[i][2]
        var add =  locations[i][3]
        latlngset = new google.maps.LatLng(lat, long);

        var marker = new google.maps.Marker({  
            map: map,
            title: loan,
            position: latlngset,
            icon: image
        });

        var cityCircle = new google.maps.Circle({
            map: map,
            zoom: 4,
            center: new google.maps.LatLng(lat, long),
            radius: 750,
            strokeColor: "#818c99",
            fillColor: "#ffffff",
            fillOpacity: 0.50
        });

        circles.push(cityCircle);

        map.setCenter(marker.getPosition());
        var content = "<h5>" + loan + '</h5>' + "<strong>Endereço:</strong> " + add;
        var infowindow = new google.maps.InfoWindow()
        google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
            return function()
            {
                infowindow.setContent(content);
                infowindow.open(map,marker);
            };
        })(marker,content,infowindow));

    }

    var marker = null;
    var i = null;

    for (i = 0; i < locations2.length; i++)
    {
        var loan = locations2[i][0]
        var lat = locations2[i][1]
        var long = locations2[i][2]
        var add =  locations2[i][3]
        latlngset = new google.maps.LatLng(lat, long);
        var marker = new google.maps.Marker({  
            map: map,
            title: loan,
            position: latlngset,
            icon: image
        });

        var cityCircle = new google.maps.Circle({
            map: map,
            zoom: 4,
            center: new google.maps.LatLng(lat, long),
            radius: 750,
            strokeColor: "#229A1F",
            fillColor: "#49DA45",
            fillOpacity: 0.50
        });

        circles2.push(cityCircle);

        map.setCenter(marker.getPosition());
        var content = "<h5>" + loan + '</h5>' + "<strong>Endereço:</strong> " + add;
        var infowindow = new google.maps.InfoWindow()
        google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
            return function() {
                infowindow.setContent(content);
                infowindow.open(map,marker);
            };
        })(marker,content,infowindow));
    }

    for ( var circle1 in circles )
    {
        for ( var circle2 in circles2 )
        {
            console.log(hasIntersections(circle1, circle2)); 
        }
    }
}
</script>

我在控制台做了测试，用console.log(圆圈)，结果一共有5个结果，如:

_.qg {gm_accessors_: {…}, map: gg, gm_bindings_: {…}, zoom: 4, center: _.L, …} A : .Rw {Ck: 0, e3: {…}, b: "planetRadius", f: false, getPlanetRadius: ƒ, …} center : _.L {lat: ƒ, lng: ƒ} closure_uid_660309532 : 1199 draggable_changed : ƒ c() editable_changed : ƒ e() f : gg {gm_bindings_: {…}, __gm: Cf, gm_accessors_: {…}, zoom: 4, center: _.L, …} fillColor : "#49DA45" fillOpacity : 0.5 gm_accessors_ : {map: null, zoom: null, center: null, radius: null, strokeColor: null, …} gm_bindings_ : {map: {…}, zoom: {…}, center: {…}, radius: {…}, strokeColor: {…}, …} hh : hW {Ck: 0, __e3_: {…}, b: _.sg, gm_bindings_: {…}, gm_accessors_: {…}, …} ja : (9) [Mc, Mc, Mc, Mc, Mc, Mc, Mc, Mc, Mc] map : gg {gm_bindings_: {…}, __gm: Cf, gm_accessors_: {…}, zoom: 4, center: _.L, …} radius : 750 strokeColor : "#229A1F" vh : (3) [Mc, Mc, Mc] visible : true zoom : 4 __e3_ : {toolbar: {…}, mouseover: {…}, click: {…}, mouseout: {…}} __proto : Object

对于console.log(circles2)，结果总共是110，对于circles和circles2，值击败了，因为对于var location []有109，var location []有5，总共115，已注册在数据库数据中。

Answer 1

如果您在 hasIntersections() 内执行 console.log(circle0, Circle1)，您可能会得到 0, 1, 2, ... 因为这就是您使用 for (a in array) 时得到的结果。

要修复它，请像这样调用它:

for ( var circle1 in circles )
    {
        for ( var circle2 in circles2 )
        {
            console.log(hasIntersections(circles[circle1], circles2[circle2])); 
        }
    }