Javascript 未捕获类型错误：无法读取属性'；设置半径'；未定义的_Javascript_Html_Google Maps

Javascript 未捕获类型错误：无法读取属性'；设置半径'；未定义的

javascript html google-maps

Javascript 未捕获类型错误：无法读取属性'；设置半径'；未定义的,javascript,html,google-maps,Javascript,Html,Google Maps,我的代码在本地部署时可以工作，但在将其部署到github页面时无法工作。在calculateRadius（）函数中，我调用setRadius（）函数，该函数为google maps圆指定一个半径。当我运行call这个函数时，我得到一个错误：“uncaughttypeerror:cannotreadproperty'setRadius'of undefined”，请参见下面的代码： <!DOCTYPE html> <html> <head> <

我的代码在本地部署时可以工作，但在将其部署到github页面时无法工作。在calculateRadius（）函数中，我调用setRadius（）函数，该函数为google maps圆指定一个半径。当我运行call这个函数时，我得到一个错误：“uncaughttypeerror:cannotreadproperty'setRadius'of undefined”，请参见下面的代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="datetime">
      Number: <input type="number" id="areaChange" value="0">
        </br>
      <form onsubmit="calculateRadius(); return false;">
        Select a date after January, 1 2010
        </br>
        Date: <input type="date" id="date" value="" min="2010-01-01">
        <button id="btn">Click</button>
      </form>
      <button id="resetBtn">Reset</button>
        <p id="data"></p>

    </div>
<script>
var areaRate = 1648.91;
var circle;
var today;
var date1;
var date2;
var timeDiff;
var diffDays;
var timePassed;

var interval;
var intervalRate = 1000;

function setRadius() {
    circle.setRadius(parseInt(document.getElementById("areaChange").value, 10));
}

function calculateRadius() {
    document.getElementById("data").innerHTML = document.getElementById("date").value;
    today = new Date();
    date1 = new Date(document.getElementById("date").value);
    date2 = today;
    timeDiff = Math.abs(date2.getTime() - date1.getTime());
    diffDays = Math.ceil(timeDiff / (1000));
    timePassed = areaRate * diffDays;

    console.log(intervalRate);
    interval = setInterval(function() {
        var radius = Math.sqrt(timePassed / Math.PI);
        document.getElementById("areaChange").value = radius;
        console.log(timePassed);

        setRadius();
        timePassed += areaRate;
    }, intervalRate);
}

document.getElementById("resetBtn").addEventListener("click", function() {
    clearInterval(interval);
    console.log(interval);
});

function initMap() {
    var styler = [{
        "featureType": "road",
        "elementType": "all",
        "stylers": [{
            "visibility": "off"
        }]
    }, {
        "featureType": "administrative.country",
        "elementType": "all",
        "stylers": [{
            "visibility": "on"
        }, {
            "invert_lightness": true
        }]
    }, {
        "featureType": "administrative.province",
        "elementType": "all",
        "stylers": [{
            "visibility": "simplified"
        }, {
            "invert_lightness": true
        }, {
            "weight": 1.43
        }]
    }, {
        "featureType": "poi",
        "elementType": "all",
        "stylers": [{
            "visibility": "off"
        }]
    }, {
        "featureType": "administrative.neighborhood",
        "elementType": "all",
        "stylers": [{
            "visibility": "off"
        }]
    }, {
        "featureType": "administrative.land_parcel",
        "elementType": "all",
        "stylers": [{
            "visibility": "off"
        }]
    }, {
        "featureType": "poi.park",
        "elementType": "all",
        "stylers": [{
            "visibility": "on"
        }]
    }, {
        "featureType": "water",
        "elementType": "all",
        "stylers": [{
            "visibility": "on"
        }, {
            "color": "#44a9b0"
        }]
    }, {
        "featureType": "landscape.man_made",
        "elementType": "all",
        "stylers": [{
            "color": "#e3e0bf"
        }]
    }];

    var detroit = {
        lat: 42.271084,
        lng: -83.737277
    };
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 2,
        center: detroit,
        styles: styler
    });
    var pos;

    navigator.geolocation.getCurrentPosition(function(position) {
        pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
        };
        map.setCenter(pos);
        circle = new google.maps.Circle({
            map: map,
            center: pos,
            radius: parseInt(document.getElementById("areaChange").value),
            editable: false,
            draggable: true,
            geodesic: true,
            strokeColor: 'transparent',
            strokeOpacity: 1,
            strokeWeight: 2,
            fillColor: '#FF4136',
            fillOpacity: 0.5
        });

    });

    var time = document.getElementById('areaChange');
    time.addEventListener('input', setRadius);

}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>


#地图{
高度：400px；
宽度：100%；
}
编号：


选择2010年1月1日之后的日期


日期：
点击
重置

var面积率=1648.91；
var圈；
今天的var；
var date1；
var date2；
var-timeDiff；
两天；
var时间流逝；
var区间；
var区间利率=1000；
函数setRadius（）{
circle.setRadius（parseInt（document.getElementById（“areaChange”）.value，10）；
}
函数计算器adius（）{
document.getElementById（“数据”）.innerHTML=document.getElementById（“日期”）.value；
今天=新日期（）；
date1=新日期（document.getElementById（“日期”）.value）；
日期2=今天；
timeDiff=Math.abs（date2.getTime（）-date1.getTime（））；
diffDays=数学单元（timeDiff/（1000））；
通过的时间=面积率*天数；
控制台日志（间隔）；
间隔=设置间隔（函数（）{
var radius=Math.sqrt（timePassed/Math.PI）；
document.getElementById（“areaChange”）。值=半径；
console.log（timePassed）；
setRadius（）；
时间通过率+=面积率；
}，间隔）；
}
document.getElementById（“resetBtn”）.addEventListener（“单击”，函数（）{
间隔时间；
控制台日志（间隔）；
});
函数initMap（）{
变量样式器=[{
“功能类型”：“道路”，
“elementType”：“全部”，
“造型师”：[{
“可见性”：“关闭”
}]
}, {
“featureType”：“administration.country”，
“elementType”：“全部”，
“造型师”：[{
“可见性”：“打开”
}, {
“倒置亮度”：正确
}]
}, {
“特征类型”：“行政省”，
“elementType”：“全部”，
“造型师”：[{
“可见性”：“简化”
}, {
“倒置亮度”：正确
}, {
“重量”：1.43
}]
}, {
“featureType”：“poi”，
“elementType”：“全部”，
“造型师”：[{
“可见性”：“关闭”
}]
}, {
“featureType”：“administration.neighbour”，
“elementType”：“全部”，
“造型师”：[{
“可见性”：“关闭”
}]
}, {
“功能类型”：“行政用地”，
“elementType”：“全部”，
“造型师”：[{
“可见性”：“关闭”
}]
}, {
“功能类型”：“poi.park”，
“elementType”：“全部”，
“造型师”：[{
“可见性”：“打开”
}]
}, {
“功能类型”：“水”，
“elementType”：“全部”，
“造型师”：[{
“可见性”：“打开”
}, {
“颜色”：“#44a9b0”
}]
}, {
“特色类型”：“景观。人造”，
“elementType”：“全部”，
“造型师”：[{
“颜色”：“e3e0bf”
}]
}];
var底特律={
纬度：42.271084，
液化天然气：-83.737277
};
var map=new google.maps.map（document.getElementById（'map'）{
缩放：2，
中心：底特律，
样式：样式器
});
var-pos；
navigator.geolocation.getCurrentPosition（函数（位置）{
pos={
纬度：位置坐标纬度，
lng:position.coords.longitude
};
地图设置中心（pos）；
圆圈=新的google.maps.circle({
地图：地图，
中心:pos,，
半径：parseInt（document.getElementById（“areaChange”）.value），
可编辑：false，
真的，
测地线：正确，
strokeColor:'透明'，
频闪不透明度：1，
冲程重量：2，
填充颜色：'#FF4136'，
填充不透明度：0.5
});
});
var time=document.getElementById（'areaChange'）；
time.addEventListener（'input'，setRadius）；
}

使用以下代码：

function setRadius(){
 if(circle)
  circle.setRadius(parseInt(document.getElementById("areaChange").value, 10));
}

问题是当

setInterval

调用

setRadius（）

时，

circle

的值由于

var circle而默认为未定义
听起来像是竞争条件。circus变量可能在您想要访问它的时候没有初始化
最可能的情况是，navigator.geolocation.getCurrentPosition在执行声明circle变量的回调之前花费了一段时间，或者可能只是失败了，因此从未声明过。不是地图方面的专家，但您是否需要开发人员密钥或类似的东西，这些密钥可能不允许您在生产或任何非本地域中使用他们的API
为什么不尝试使用chrome devtools inspector添加断点？
这不会解决问题，因为如果圆变量未定义，它将永远不会执行，这将阻止显示错误。OP将在后面声明值。圆圈=新的google.maps.circle({谢谢你的回复！我没有收到typeError，但圆圈没有显示。你知道为什么吗？如果是这种情况，我应该无法在本地主机上运行该函数。问题是代码在本地主机上运行，但在我将其部署到github页面时无法运行。请检查我告诉过你的有关google key of credential的内容，以便能够使用在生产中使用它。可能到目前为止，您只允许在本地使用它。您是否尝试添加一些断点、控制台日志等来查看它的行为？Javier，谢谢您的回答。这不是API键。我从帖子中删除了它。我做了一些调整，错误消息更改为circle。setFunction不是一个函数。它似乎是f的问题rom GitHub页面。我将主持我的