未捕獲的ReferenceError：SearchAddress未在HTMLInputElement.onclick處定義

-1

我正在嘗試製作具有可移動點但還包含搜索選項以搜索地址的Google地圖API。我得到了可拖動的點，但得到一個Uncaught ReferenceError：當我嘗試運行這段代碼時，SearchAddress沒有在HTMLInputElement.onclick中定義。我無法弄清楚如何讓這個工作。我試圖從其他InitMap函數中刪除SearchAddress函數，但仍然不勝感激。未捕獲的ReferenceError：SearchAddress未在HTMLInputElement.onclick處定義

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<title>Draggable directions</title> 
<link rel="stylesheet" type="text/css" href="stylesheet1.css"> 

<script type="text/javascript"> 

var x = document.createElement("INPUT"); 
    x.setAttribute("type", "text"); 

var moveloc1 = {lat: 55, lng: -7.3}; 
var moveloc2 = {lat: 55, lng: -7.1}; 



function initMap() 
{ 
    console.log("error checker1"); 
    var geocoder = new google.maps.Geocoder();  
    var map = new google.maps.Map(document.getElementById('map'), 
    { 
     zoom: 14, 
     center: {lat: 55, lng: -7.3} // Australia. 
    }); 

    var directionsService = new google.maps.DirectionsService; 
    var directionsDisplay = new google.maps.DirectionsRenderer 
    ({ 
     draggable: true, 
     map: map, 
     panel: document.getElementById('right-panel') 
    }); 

    directionsDisplay.addListener('directions_changed', function() 
    { 
     computeTotalDistance(directionsDisplay.getDirections()); 
    }); 

    displayRoute(moveloc1, moveloc2 , directionsService, 
    directionsDisplay); 
    console.log("error checker2"); 
    function SearchAddress() 
    { 
     console.log("error checker3"); 

     var locate1 = document.getElementById("pass1").value; 
     var locate2 = document.getElementById("pass2").value; 
     console.log(locate1); 
     console.log(locate2); 
     geocoder.geocode({ 'pass1': address}, function(results, status) 
     { 
      if (status == 'OK') 
      { 
       map.setCenter(results[0].geometry.location); 
       moveloc1 = 
       ({ 
        position: results[0].geometry.location 
       }); 
      } 
      else 
      { 
      alert('Geocode was not successful for the following reason: ' + 
status); 
      } 
     }); 

    } 
} 

    function displayRoute(origin, destination, service, display) 
    { 
    service.route 
    ({ 
     origin: origin, 
     destination: destination, 
     travelMode: 'DRIVING', 
     avoidTolls: true 
    }, 
    function(response, status) 
    { 
     if (status === 'OK') 
     { 
      display.setDirections(response); 
     } 
     else 
     { 
      alert('Could not display directions due to: ' + status); 
     } 
    }); 
    } 

    function computeTotalDistance(result) 
    { 
    var total = 0; 
    var myroute = result.routes[0]; 
    for (var i = 0; i < myroute.legs.length; i++) 
    { 
     total += myroute.legs[i].distance.value; 
    } 
    total = total/1000; 
    document.getElementById('total').innerHTML = total + ' km'; 
    } 

</script> 

</head> 

<body> 
<div id="map"></div> 
<div id="right-panel"> 
<form> 
Start<input class="textBox" id="pass1" type="text" maxlength="30" /> <br> 
End<input class="textBox" id="pass2" type="text" maxlength="30" /> 
<input type = "button" id="button" name="button" value="search" onclick = 
"SearchAddress()"/> 
</form> 
<p>Total Distance: <span id="total"></span></p> 
</div> 

<script async defer 
src="https://maps.googleapis.com/maps/api/js? 
key=AIzaSyBtQt_1BqPPuSdIbXTuYW9I8yNUGIItPuk&callback=initMap"> 
</script> 
    </body> 
</html>`

來源

2017-05-08 John Bon

你有你的源代碼中的錯字？該文檔必須以'<！DOCTYPE html>' –

開頭，代碼已經以<！DOCTYPE html>開頭。 –

<script type="text/javascript"> 

var x = document.createElement("INPUT"); 
    x.setAttribute("type", "text"); 
var geocoder; 
var moveloc1 = {lat: 55, lng: -7.3}; 
var moveloc2 = {lat: 55, lng: -7.1}; 

function SearchAddress() 
{ 
    console.log("error checker3"); 

    var locate1 = document.getElementById("pass1").value; 
    var locate2 = document.getElementById("pass2").value; 
    console.log(locate1); 
    console.log(locate2); 
    // adress must be defined 
    geocoder.geocode({ 'pass1': adress}, function(results, status) 
    { 
     if (status == 'OK') 
     { 
      map.setCenter(results[0].geometry.location); 
      moveloc1 = 
      ({ 
       position: results[0].geometry.location 
      }); 
     } 
     else 
     { 
     alert('Geocode was not successful for the following reason: ' + 
status); 
     } 
    }); 

} 

function initMap() 
{ 
    console.log("error checker1"); 
    geocoder = new google.maps.Geocoder();  
    var map = new google.maps.Map(document.getElementById('map'), 
    { 
     zoom: 14, 
     center: {lat: 55, lng: -7.3} // Australia. 
    }); 

    var directionsService = new google.maps.DirectionsService; 
    var directionsDisplay = new google.maps.DirectionsRenderer 
    ({ 
     draggable: true, 
     map: map, 
     panel: document.getElementById('right-panel') 
    }); 

    directionsDisplay.addListener('directions_changed', function() 
    { 
     computeTotalDistance(directionsDisplay.getDirections()); 
    }); 

    displayRoute(moveloc1, moveloc2 , directionsService, 
    directionsDisplay); 
    console.log("error checker2"); 

} 

    function displayRoute(origin, destination, service, display) 
    { 
    service.route 
    ({ 
     origin: origin, 
     destination: destination, 
     travelMode: 'DRIVING', 
     avoidTolls: true 
    }, 
    function(response, status) 
    { 
     if (status === 'OK') 
     { 
      display.setDirections(response); 
     } 
     else 
     { 
      alert('Could not display directions due to: ' + status); 
     } 
    }); 
    } 

    function computeTotalDistance(result) 
    { 
    var total = 0; 
    var myroute = result.routes[0]; 
    for (var i = 0; i < myroute.legs.length; i++) 
    { 
     total += myroute.legs[i].distance.value; 
    } 
    total = total/1000; 
    document.getElementById('total').innerHTML = total + ' km'; 
    } 

</script>

來源

2017-05-08 14:05:46

因此，函數中的函數不能像那樣被引用？ –

這會創建一個未捕獲的ReferenceError：未在GoogleAddressElement.onclick錯誤中的SearchAddress（index.php：60）處定義地址解析器，這就是爲什麼我在Initmap內部存在該地址解析器的原因。據我所知，geocoder必須在聲明地圖時聲明。 –

它們可以像這樣聲明，但只有當你的情況下調用外部函數initMap（）...所以它看起來像initMap（）沒有被調用，例如你的地圖腳本尚未加載並調用回調 –

問題：

你的問題是，你聲明SearchAddress功能initMap函數中，你試圖從全球範圍內訪問它（在HTML元素），這是不可能的。

說明：

其實本地的功能和局部變量不能從全局範圍或從其他功能進行訪問。請注意，在HTML元素事件中，您只能訪問在全局window範圍內聲明的函數。

您需要在全局範圍內聲明它，以便您可以從所有函數和HTML元素中訪問它。

注：

你需要修復與您的所有函數的聲明那樣的問題在你的代碼。

來源

2017-05-08 16:11:12

未捕獲的ReferenceError：SearchAddress未在HTMLInputElement.onclick處定義

回答

相關問題