Uncaught TypeError：無法讀取未定義的屬性'setRadius'

-2

我的代碼在本地部署時起作用，但當我將其部署到github頁面時，它不起作用。在calculateRadius（）函數中，我調用setRadius（）函數，該函數將一個半徑分配給Google地圖圈。當我運行調用這個函數，我得到一個錯誤說「遺漏的類型錯誤：無法讀取的未定義的屬性‘setRadius’」請參見下面的代碼：下面的代碼Uncaught TypeError：無法讀取未定義的屬性'setRadius'

<!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>

來源

2017-09-20 Ibarrameade

它似乎是從GitHub頁面的問題。我將在不同的主機中託管我的頁面。 – Ibarrameade

用途：

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

問題是當setInterval正在調用setRadius()circle的值是undefined默認情況下是因爲var circle;

來源

2017-09-20 18:14:10 squiroid

這不會解決問題，因爲如果圓形變量未定義，它將永遠不會執行，這隻會阻止顯示錯誤。 –

OP正在聲明後者的值。 circle = new google.maps.Circle（{ – squiroid

感謝您的回覆！我沒有得到一個typeError，但圓圈沒有顯示。你知道爲什麼嗎？ – Ibarrameade

聽起來像種族條件。可能馬戲團變量在你想訪問它的時候沒有初始化。

它最有可能的navigator.geolocation.getCurrentPosition需要一段時間才執行回調聲明圓形變量或可能只是失敗，所以這是從來沒有宣佈。不是地圖專家，但你需要開發人員密鑰或類似的東西，可能不允許你在生產環境或任何非本地域使用他們的API？

爲什麼不嘗試用chrome devtools inspector添加斷點？

來源

2017-09-20 18:14:18

如果是這種情況，我不應該能夠在我的本地主機上運行該功能問題是，代碼在我的本地主機中工作，但不是在我將其部署到github頁面時 – Ibarrameade

請查看我告訴過你的關於憑證的Google密鑰以便能夠在生產環境中使用它。也許到目前爲止，你只是允許在本地使用它。你是否嘗試添加一些斷點，控制檯日誌等以查看它的行爲？ –

Javier，感謝您的回答。它不是API密鑰。該帖子，我做了一些調整，錯誤信息改爲circle.setFunction不是一個函數。 – Ibarrameade

Uncaught TypeError：無法讀取未定義的屬性'setRadius'

回答

相關問題