2017-01-24 1 views
0

내 asp.net 프로젝트에서 google maps를 사용하고 있습니다. 일부 주소를 입력하면 제안 사항이 표시되고 그 중 하나를 선택하면 해당 주소와 관련된지도가 표시됩니다. 이것은 잘 작동합니다. 하지만 그 사용자 유형을 1 페이지의 텍스트 상자에 입력하고 그 입력을 받아 페이지 2의지도 텍스트 상자와 2 페이지의 주소와 관련된지도를 채우려합니다. 여기두 번째 페이지에 Google지도 표시

난 당신이 해시 태그와 다른 페이지 (또는 같은 페이지)에 변수를 보낼 수 있습니다 그것을

$(document).ready(function() { 

    // Empty the value on page load 
    $("#formattedAddress").val(""); 
    // variable to indicate whether or not enter has been pressed on the input 
    var enterPressedInForm = false; 

    var input = document.getElementById("inputName"); 
    var options = { 
     componentRestrictions: {country: 'uk'} 
    }; 
    autocomplete = new google.maps.places.Autocomplete(input, options); 

    $("#formName").submit(function(e) { 
     // Only submit the form if information has been stored in our hidden input 
     return $("#formattedAddress").val().length > 0; 
    }); 

    $("#inputName").bind("keypress", function(e) { 
     if(e.keyCode == 13) { 
      // Note that simply triggering the 'place_changed' event in here would not suffice, as this would just create an object with the name as typed in the input field, and no other information, as that has still not been retrieved at this point. 

      // We change this variable to indicate that enter has been pressed in our input field 
      enterPressedInForm = true; 
     } 
    }); 

    // This event seems to fire twice when pressing enter on a search result. The first time getPlace() is undefined, and the next time it has the data. This is why the following logic has been added. 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     // If getPlace() is not undefined (so if it exists), store the formatted_address (or whatever data is relevant to you) in the hidden input. 
     if(autocomplete.getPlace() !== undefined) { 
      $("#formattedAddress").val(autocomplete.getPlace().formatted_address); 
     } 
     // If enter has been pressed, submit the form. 
     if(enterPressedInForm) { 
      $("#formName").submit(); 
     } 
    }); 
}); 

감사합니다, 아시프 하미드

답변

0

을하고있는 중이 야 방법이다. #의 오른쪽에있는 것은 서버에 의해 무시되지만 javascript에 의해 읽거나 설정 될 수 있습니다.

1 페이지에 당신은이 값은 다음과 같이 페이지 2 읽을 수 있습니다

<a href="page2.htm#25">25</a> 
<a href="page2.htm#50">50</a> 

이 같이 :

var pos = location.hash.substr(1); 
여기

이 양식

PAGE1와 예입니다 .htm

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Page 1 - type address</title> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script> 
    $(function() { 
    $('#formName').on('submit', function(e) { 
     // read address 
     var address = $('#formattedAddress').val(); 
     // add hash to page 2 
     window.location = 'page2.htm#' + address; 
     // prevent real submit 
     e.preventDefault(); 
     return false; 
    }); 
    }); 
    </script> 
</head> 
<body> 
    <form id="formName"> 
    <input id="formattedAddress" placeholder="Enter address"/> 
    <input type="submit" value="submit" /> 
    </form> 
</body> 
</html> 

page2.htm

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Page 2 - populate map</title> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script> 
    $(function() { 
    if(location.hash) { 
     var address = location.hash.substr(1); 
     $('#test').html(address); 
    } 
    }); 
    </script> 
</head> 
<body> 
    <div id="test"></div> 
</body> 
</html> 

당신이 Google지도 웹 페이지에이 적용의 어려움이 있으면 말해. 좌표를 page2에 전달해보십시오. "page2.htm # 50.24/4.45"=>

var variables = location.hash.substr(1); 
var position = variables.split('/'); 
var lat = Number(position[0]); 
var lng = Number(position[1]); 

또는 검색 문자열을 전달 같은

. 그것은 역시 효과가있다.

관련 문제