StoreLocator google Javascript API 사용

내 코드가 javascript geolocation 함수에서 html "id = latitude and longitude"값을 제공하지 않는 것 같습니다. document.getElementByID ("Id")를 사용합니다. value = "value"; 그것은 올바른 방법이 아닙니까? 아래 코드를 확인하십시오. 어쩌면 나는 뭔가를 놓치고있다. 내 숨겨진 값이 주어진 후 모든 것이이 코드가 작동StoreLocator google Javascript API 사용

<body> 


<form method="GET" action="storelocator.php" > 

    <input onclick="getLocation()" type="submit" value="Try"> 
    <input id="latitudeId" name="lat" type="hidden" > 
    <input id="longitudeId" name="lng" type="hidden" > 

    <div class="dropdown"> 
    <select name="radius"> 
     <option value="1000">1000</option> 
     <option value="500" selected="selected" >500</option> 
     <option value="300">300</option> 
     <option value="100">100</option> 
    </select> 
    </div>  

</form> 

<p id="show"></p> 

<script type="text/javascript"> 
var x = document.getElementById("show"); 

function getLocation() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(showPosition); 
    } else { 
     x.innerHTML = "Geolocation is not supported by this browser."; 
    } 

    function showPosition(position) { 
     var lat = position.coords.latitude; 
     var lng = position.coords.longitude; 

     document.getElementByID("latitudeId").value = lat; 
     document.getElementByID("longitudeId").value = lng; 
    } 
}  

</script> 


</body>

출처

2017-10-17 Peekaymaja

을 storelocator.php에 게시해야합니다. 콘솔에 결과를 표시합니다. 첫 번째 오류는, 당신은 당신의 기능 showPosition와 somethign 이상한 당신의 getLocation 내부에서 생성되는 나는, 그것은 자본 D.

var x = document.getElementById("show"); 
 
var form = document.querySelector('form'); 
 
form.addEventListener('submit', function(e) { 
 
    e.preventDefault(); 
 
    getLocation(); 
 
}); 
 

 
function getLocation() { 
 
    if (navigator.geolocation) { 
 
     navigator.geolocation.getCurrentPosition(showPosition); 
 
    } else { 
 
     x.innerHTML = "Geolocation is not supported by this browser."; 
 
    } 
 
} 
 
function showPosition(position) { 
 
     var lat = position.coords.latitude; 
 
     var lng = position.coords.longitude; 
 

 
     document.getElementById("latitudeId").value = lat; 
 
     document.getElementById("longitudeId").value = lng; 
 

 
     form.submit(); 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Document</title> 
 
</head> 
 
<body> 
 
    <form method="GET" action="storelocator.php" > 
 
    
 
     <input type="submit" value="Try"> 
 
     <input id="latitudeId" name="lat" type="hidden" > 
 
     <input id="longitudeId" name="lng" type="hidden" > 
 
    
 
     <div class="dropdown"> 
 
     <select name="radius"> 
 
      <option value="1000">1000</option> 
 
      <option value="500" selected="selected" >500</option> 
 
      <option value="300">300</option> 
 
      <option value="100">100</option> 
 
     </select> 
 
     </div>  
 
    
 
    </form> 
 
    
 
    <p id="show"></p> 
 
    
 
    <script type="text/javascript" src="test.js"></script> 
 
</body> 
 
</html>

와 getElementById하지 getElementByID의,주의 하시고 당신의에서 getElementById 소개 }

누락 생각했다

출처

2017-10-17 22:08:39 sheplu

고마워요, 그게 내가 html 숨겨진 값을 위치 값을 제공하고 싶습니다. 문제는 storelocator.php로 리디렉션 될 때 URL에 일부 값이 누락 되었음이 표시된다는 것입니다. http : //localhost/mywebsite/storelocator.php? lat = & lng = & radius = 500, 그래서 위도와 lng는 반경 값만 가져 오지 않았습니다. – Peekaymaja

이 방금 코드를 업데이트했습니다. 지오 로케이션을 기다리지 않고 양식이 새 페이지에서 즉시 리다이렉트했기 때문에 작동하지 않았습니다. 이제 형태가 geolocation을 기다린 다음 리디렉션합니다. 나는 그것을 테스트했고, 크롬과 파이어 폭스로 작업하고있다. – sheplu

알았어, 고마워. 나는 당신이 약간의 변화를 일으킨 것을 곧 보게됩니다. – Peekaymaja

StoreLocator google Javascript API 사용

답변

관련 문제