Question

我在本地部署代码时可以正常运行，但是当我将代码部署到github页面时它不起作用。在calculateRadius（）函数中，我调用setRadius（）函数，该函数为谷歌地图圆圈指定半径。当我运行调用此函数时，我收到一条错误消息“Uncaught TypeError：无法读取属性'setRadius'的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>

Answer 1

使用以下代码：

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

问题在于，setInterval默认setRadius() circle的值undefined默认为var circle;因为{{1}}

Answer 2

听起来像是竞争条件。可能在您想要访问它时，不会初始化circus变量。

最有可能的navigator.geolocation.getCurrentPosition在执行回调声明圆圈变量之前需要一段时间，或者可能只是失败，因此永远不会声明。不是地图方面的专家，但您是否需要开发人员密钥或类似的东西，可能不允许您在生产或任何非本地域中使用他们的API？

为什么不尝试使用chrome devtools检查器添加断点？

未捕获的TypeError：无法读取未定义的属性'setRadius'

2 个答案: